使用javascript获取offsetLeft的伪元素

Question

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

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

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

Answer 1

您可能已经弄清楚了这一点，但我自己在寻找答案时偶然发现了这个问题，而且我非常有信心答案是否定的。至少不是没有一些古怪的解决方法。

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

但由于我们只需要视口中未变换的位置，因此我们可能不需要所有这些。如果它绝对定位在其父级内，则只需获取其父级的 offsetLeft 就足够了，然后使用 getCompulatedStyle 对其进行偏移以获得真实的东西：

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 时需要隐藏伪元素。