Question

我有这个动画，我需要在小圆圈触摸时更改中心元素的颜色，我想我可以使用position（）找到它但是因为我使用的是：之前用于制作动画div的位置值没有用，有没有办法可以实现这个或任何其他方式来找出小圆与大圆相交的时间。

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指定所需的内容值。

的Javascript

$('.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
}

如何使用Javascript找到元素之前的位置？

1 个答案: