根据 class 名称 Javascript 更改伪元素的颜色

Question

我有一个伪元素（标记），当加载特定的 class 时，它的颜色应该会改变颜色。

html -

<ol>
    <li>
       ::marker
       <span class='be_blue'> First </span>
    </li>
</ol>

如果 class name='be_blue' 那么标记也应该是蓝色的，否则它应该保持黑色。 这必须从 Javascript 完成

const markerColor = document.getElementByClassName('be_blue')

得到元素后我该怎么办？

Answer 1

您可以将 class 动态添加到li并在其上添加 css 以更改标记颜色

 const markerColor = document.getElementsByClassName('be_blue'); for (i = 0; i < markerColor.length; i++) { const par = (markerColor[i].parentNode); par.classList.add("blue"); }

 ol li::marker { color: black; } ol li.blue::marker { color: blue; }

 <ol> <li> <span class='be_blue'> First </span> </li> <li> <span class='be_blue'> Secomd </span> </li> <li> <span class='be_blue'> Third </span> </li> </ol>