您可以在 javascript 中设置有序列表编号的样式吗？

Question

我有一些东西可以在列表中选择行号，并且我有使用有序列表制作的行号。选择行号后，我希望该特定行的行号指示器更改颜色。我该怎么做？

我知道您可以通过 li::marker 在 CSS 中设置样式，但是我如何更改 javascript 中的单个列表项标记？

Answer 1

您可以添加 class 来列出要突出显示的项目。

document.querySelector('ol').children[1].classList.add('highlight');

li.highlight::marker {
  color: red;
}

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

如果事先知道项目，可以使用:nth-child()伪class。

li:nth-child(2)::marker {
  color: red;
}

<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Can you style ordered list numbers in javascript?