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

例如，第一个伪元素的顶部和底部分别是10.5和-9.5，（10.5）-（-9.5）是伪元素（20）的高度。

第二个伪元素的顶部和底部分别为-25和-50，但是伪元素的高度为180。它们的“位置”属性均具有“绝对”值。因此行为是不一致的。

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

Answer 1

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

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

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

bottom属性在获取时必须返回max（y坐标，y   坐标+高度尺寸）。

css bottom属性是一个位置值。使用absolute定位的元素：

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

类似于“顶部”，但指定框的底部边距边缘偏移的距离   高于框的包含块的底部。

因此，您不能简单地使用公式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);

您如何找到伪元素的坐标？

1 个答案: