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

【问题标题】：how change properties of :before (pseudo-element) element (with jQuery)如何更改 :before （伪元素）元素的属性（使用 jQuery）
【发布时间】：2018-03-29 12:38:03
【问题描述】：

告诉我如何更改元素的属性：之前？

例如：

css:

.myclass:before {
    content:                '';

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

jquery

myElement.addClass('myclass');

我想改变：

来自

left: 40px

到

left: 100px

我该怎么做？

【问题讨论】：

标签： javascript jquery html css pseudo-element

【解决方案1】：

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

你可以尝试使用jQuery直接插入css

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

或者我更喜欢的方式是添加另一个在其 CSS 规则中留下 100 像素的类

CSS

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

jQuery

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

【讨论】：

【解决方案2】：

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

【讨论】：