使用javascript获取伪元素的offsetLeft

Question

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

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

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

- vin

---

请提供一个 Fiddle，以吸引更多人关注您的问题。 - scooterlord

:D 这个问题我已经问了好几年了。我依稀记得我曾经操纵过父元素的某个属性来获取伪元素的大致 offsetLeft。然而，我的理解是，由于伪元素是隐藏元素，不是 DOM 的一部分，它们无法访问 DOM 属性。可能我错了，因为我已经好几年没有处理这个问题了。但我想知道你是否有其他方法来解决它。 - vin

好的，我刚刚点击了“未回答的问题”，然后偶然发现了这个。我会设置一个 fiddle 并查看一下。 - scooterlord

有点奇怪的请求，不过还是一个非常简单的问题。 - Different55

Answer 1

您可能已经明白了，但我在寻找答案时偶然发现了这个问题，我非常自信地说答案是否定的。至少没有一些hacky的解决方法是不行的。

在这里，有人想要伪元素完全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时，您需要隐藏伪元素。

- Different55