如何更改 :before （伪元素）元素的属性（使用 jQuery）

Question

告诉我如何更改元素的属性 :before?

例如：

css:

.myclass:before {
    content:                '';

    position:               absolute;
    left:                   40px;
    top:                    -10px;
}

jquery

myElement.addClass('myclass');

我要换：

来自

left: 40px

至

left: 100px

我该怎么做？

Answer 1

伪元素不是 DOM 的一部分，因此不能使用 jQuery 或 Javascript 进行操作。

您可以尝试使用 jQuery

直接插入 css

$('head').append('<style>.myclass:before{left:100px;}</style>');

或者我更喜欢的方式是添加另一个 class，它在其 CSS 规则

中留下了 100 像素

CSS

.myclass.active:before {
    left: 100px;
}

jQuery

$("#myElement.myclass").addClass("active");

Answer 2

Afaik 没有直接的方法可以做到这一点。如果您真的想更新 CSS 规则 - 那么您需要转到浏览器的 CSSOM interfaces。但在大多数情况下，在为元素本身分配额外的 CSS class 时，只定义单独的 CSS 规则对 :before 伪元素进行必要的更新应该更容易。 =12=]

如何更改 :before （伪元素）元素的属性（使用 jQuery）

how change properties of :before (pseudo-element) element (with jQuery)

html

javascript

css

jquery

pseudo-element