javascript - 使用 jQuery 检索和修改 :before 元素

Question

我想选择一个由 CSS 选择器创建的元素:before。

我尝试使用$('#element:before')，但这不起作用，因为它选择了整个元素而不仅仅是:before元素。

这是示例代码：DEMO

在该示例中，只有字符串“1.”应该是红色的，而不是整个字符串。知道怎么做吗？

Answer 1

JQuery 无法在 :before 内容上设置 css 属性，因为它不包含在元素中。如果您希望能够使用 javascript 操作 :before 内容的颜色，您可以创建一个额外的 css 类，并添加/删除该类。

例子

Answer 2

您不能定位使用 css 创建的内容:before。但是，您可以定位数据元素并将其添加到 css 中的内容标记。请参阅此问题的已接受答案。

如果您希望这是您的目标，也可以使用 css 进行样式设置：

div:before {
    content: '1. ';
    color:red;
}

只会使 1. 变红。

Answer 3

一种方法可以是custom properties，实际上是 css 变量。

这里的兼容性

这里有一些文档

还有一个示例，其中变量--myColor具有全局范围，因为在下面声明:root：

setInterval(function() {  
  
  $(':root').css('--myColor', 'red');

}, 2000);

:root {
  
  --myColor: green;
  
  font-size: 30px;
  font-weight: bold;
}
div:before {
    content: '1. ';
    color: var(--myColor);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  test
</div>