使用javascript获取伪元素的offsetLeft答案

【问题标题】：Get offsetLeft of pseudo elements using javascript使用javascript获取伪元素的offsetLeft
【发布时间】：2015-06-04 07:27:58
【问题描述】：

有没有办法只使用 javascript 来获取伪元素的 offsetLeft ？

我可以通过 chrome devtools 控制台检查 ::before 元素并获取它的 offsetLeft。

由于 window.getComputedStyle(elem, ':before') 给出 ::before 的计算样式，是否有类似访问 offsetLeft 的东西？

【问题讨论】：

请提供小提琴以吸引更多关注您的问题
:D 我已经好几年没问这个问题了。我隐约记得我曾使用父元素的某些属性来获得伪元素的近似 offsetLeft。但是我的理解是，伪元素是隐藏元素，并不是 DOM 的真正组成部分，它们无权访问 DOM 属性。我可能错了，因为我已经研究了几年了。但想知道您是否有其他方法
好吧，我只是点击了“未回答的问题”并偶然发现了这一点。设置一个小提琴，看看
有点奇怪的请求，ngl。这是一个非常简单的问题。

标签： javascript css google-chrome pseudo-element

【解决方案1】：

您可能已经想到了这一点，但我偶然发现了这个问题，自己寻找答案，而且我非常有信心答案是否定的。至少，并非没有一些 hacky 变通办法。

在here 上，有人想要一个伪元素的完全 CSS 转换的高度，使用 window.getComputedStyle() 拉出所有样式，将它们贴在真实元素上，然后访问它的边界矩形。

但由于我们只需要视口中未转换的位置，我们可能不需要所有这些。如果它绝对定位在其父级中，则只需获取其父级的 offsetLeft，然后使用 getComputedStyle 将其偏移即可获得真实的东西：

var pseudoStyles = window.getComputedStyle(parent, ":before");
var pseudoOffsetLeft = parent.offsetLeft + parseFloat(pseudoStyles.left) + "px"

https://jsfiddle.net/4q5uy2af/

它不如 getBoundingClientRect 好，因为它没有考虑 CSS 转换，但 offsetLeft 无论如何都不会这样做。如果伪元素有position: fixed，那么offsetLeft 可以纯粹从样式中计算出来。但是，如果浏览器仍然可以控制将其置于流中，我认为事情会变得更加棘手。您可以将样式复制到真实元素，但在检查其替代元素的 offsetLeft 时需要隐藏伪元素。

【讨论】：