你能在 javascript 中设置有序列表编号的样式吗？ [复制]

Posted 2023-02-23

【中文标题】你能在 javascript 中设置有序列表编号的样式吗？ [复制]

【英文标题】：Can you style ordered list numbers in javascript? [duplicate]

【发布时间】：2021-12-01 08:07:25

【问题描述】：

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

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

https://replit.com/@KittyCraft0/3D-modeling-software-10#ObjSettings/SelPoint.js:67:29

【问题讨论】：

使用类名？

使用 li:nth-child(n)?

【参考方案1】：

您可以添加一个类来列出您想要突出显示的项目。

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() 伪类。

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

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

【讨论】：

我希望它能够在我选择一个新项目时进行更改，以便旧项目停止着色而新项目着色，这样它的事件侦听器需要 javascript选定点的变化和更新

@KittyCraft0 所以只需添加和删除一个使用 JavaScript 突出显示的类。如果您需要更详细的帮助，您应该发布您的代码。

@KittyCraft0 我已经更新了我的答案以展示如何在 JavaScript 中添加一个类。

@KittyCraft0 所以使用一个类....

@epascarello 没有人回答为什么你不能按照document.getElementById("thelistitem").style.marker.color="blue"; 或其他方式做一些事情，但我想我从未指定过......