javascript - 你如何找到伪元素的坐标？

Question

我一直在寻找这个问题的答案，但未能找到有效的答案。让我们以下面的网站为例: https://www.atlassian.com/devops

在以下元素之前有一个伪元素:

var e = document.querySelector('li[class=language-selector]');
e.getClientRects();
top:    9797
bottom: 9818
left:   78
right:  162
x:      78
y:      9797
width:  85
height: 21

函数 window.getComputedStyle 返回顶部、底部、左侧等的一些值:

window.getComputedStyle(e, ':before').top;      //10.5      
window.getComputedStyle(e, ':before').bottom;   //-9.5      
window.getComputedStyle(e, ':before').left;     //-26       
window.getComputedStyle(e, ':before').right;    //90.6      
window.getComputedStyle(e, ':before').x;        //0
window.getComputedStyle(e, ':before').y;        //0
window.getComputedStyle(e, ':before').width;    //20
window.getComputedStyle(e, ':before').height;   //20

起初它似乎是相对于基本元素的值，但如果我检查同一页面中的其他元素，行为似乎不一致:

var e3=document.querySelectorAll('blockquote[class="cite large-quote"]')[0];
top:    2303
bottom: 2408
left:   78
right:  1038
x:      78
y:      2303
width:  960
height: 105

函数 window.getComputedStyle 返回以下内容:

window.getComputedStyle(e3, ':before').top;     //-25
window.getComputedStyle(e3, ':before').bottom;  //-50
window.getComputedStyle(e3, ':before').left;    //0
window.getComputedStyle(e3, ':before').right;   //889.25
window.getComputedStyle(e3, ':before').x;       //0
window.getComputedStyle(e3, ':before').y;       //0
window.getComputedStyle(e3, ':before').width;   //70.75
window.getComputedStyle(e3, ':before').height;  //180

比如第一个伪元素的top和bottom分别是10.5和-9.5，(10.5) - (-9.5)就是伪元素(20)的高度。

第二个伪元素的顶部和底部分别为 -25 和 -50，但伪元素的高度为 180。它们的“position”属性都具有“absolute”。所以行为不一致。

如果有人能阐明如何获取伪元素的位置或坐标，我们将不胜感激。

Answer 1

css 属性 bottom 与边界矩形的 bottom 属性不同。事实上，顶部和底部的 css 值在第一次测试中最终成为伪元素的高度只是巧合。

边界矩形 bottom 是根据它的 y 位置和它的高度计算的:

https://drafts.fxtf.org/geometry/#dom-domrectreadonly-domrect-bottom

The bottom attribute, on getting, must return max(y coordinate, y coordinate + height dimension).

然而，CSS bottom 属性是一个位置值。使用 absolute 定位元素:

https://www.w3.org/TR/CSS2/visuren.html#propdef-bottom

Like 'top', but specifies how far a box's bottom margin edge is offset above the bottom of the box's containing block.

因此您不能简单地使用公式 bottom-top 来获取伪元素的高度。您必须考虑最近定位的容器元素的高度，在您的情况下是 blockquote。

所以对于 blockquote 元素:它的高度是 105px。报价的顶部比顶部高 25px，底部比底部低 50px。使用这些值，您可以获得伪元素的高度:

105 - -25 - -50 = 180

至于坐标:x,y 属性似乎是特定于浏览器的，因为它们在 Firefox、IE 等中不存在。而且我无法找出它们究竟应该持有什么。边界框上的值也只是左侧的顶部值。

所以如果你想计算左边，顶部的值，你必须使用它的左边，顶部的值，并再次考虑最近定位的父级的位置

var rect = e.getClientRects();
var pseudoStyle = window.getComputedStyle(e, ':before');

//find the elements location in the page
//taking into account page scrolling
var top = rect.top + win.pageYOffset - document.documentElement.clientTop;
var left = rect.left + win.pageXOffset - document.documentElement.clientLeft;

//modify those with the pseudo element's to get its location
top += parseInt(pseudoStyle.top,10);
left += parseInt(pseudoStyle.left,10);