如何使用Javascript找到：before元素的位置？

Question

我正在播放此动画，当小圆圈触摸它时，我需要更改中心元素的颜色，我以为可以使用position（）找到它，但由于我使用：be来为div设置动画，所以位置值没有用，有没有一种方法可以实现这一目标，或者我可以通过其他任何方法找出小圆与大圆的交点。

https://jsfiddle.net/pwqfh7ys/5/

html

<figure class="glob-wrapper">
    <div class="goos">
        <div class="goo"></div>
        <div class="goo"></div>
        <div class="goo"></div>
        <div class="goo"></div>
        <object type="image/svg+xml" data="./img/hello.svg" class="hello"></object>
    </div>
    <div class="blobs">
        <div class="blob"></div>
    </div>
</figure>

css

Answer 1

您无法通过JavaScript修改伪元素，因为它们不是DOM的一部分。 最好的选择是使用所需的样式在CSS中定义另一个类，然后将其添加到元素中。 由于从您的问题看来这似乎是不可能的，因此也许您需要研究使用真正的DOM元素而不是伪元素。

希望以下代码片段对您有所帮助，您可以使用CSS attr（）函数通过JS指定所需的内容值。

Java脚本

$('.blob').on('click', function () {
    //do something with the callback
    $(this).attr('data-before','anything'); //anything is the 'content' value
});

CSS：

.blob:before {
    content: attr(data-before); //value that that refers to CSS 'content'
    //css here
}