根据类名Javascript更改伪元素的颜色答案

【问题标题】：change color of pseudo-element based on class name Javascript根据类名Javascript更改伪元素的颜色
【发布时间】：2020-12-13 01:00:59
【问题描述】：

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

html -

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

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

const markerColor = document.getElementByClassName('be_blue')

得到元素后我该怎么办？

【问题讨论】：

如果你将该类添加到li会更容易
如果我添加类如何过滤掉标记中的颜色变化？你能在工作中证明这一点吗？
如果您将 be_blue 类添加到 li 而不是 span 您可以使用 css 轻松管理它
span 的类是内置的，cz 它会动态变化，因此我无法更改，但我可以管理的任何其他 li 类
检查我的答案。

标签： javascript css

【解决方案1】：

您可以动态添加类到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>

【讨论】：

如果我有一个 li 的列表怎么办？ cz 使用 [0] 仅为第一个 li 元素编写的代码
在这种情况下，循环遍历每个 li，并带有一个具有类 'be_blue' 的孩子
代码已根据您的查询更新