使用 jQuery 檢索和修改 :before 元素

Question

我想選擇一個由 CSS 選擇器:before創建的元素。

我嘗試使用$('#element:before') ，但這不起作用，因為它選擇了整個元素而不僅僅是:before元素。

這是示例代碼： DEMO

在該示例中，只有字符串“1.”應該是紅色的，而不是整個字符串。 知道怎么做嗎？

Answer 1

JQuery無法在內容之前設置css屬性：因為它不包含在元素中。 如果您希望能夠在使用javascript內容之前操作：的顏色，則可以創建一個額外的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>