您可以在 javascript 中设置有序列表编号的样式吗？如果是这样，如何？

Question

假设您有一个 HTML 元素，如下所示：

<p id="theparagraph">Hello there!</p>

您可以分别使用 CSS 或 javascript 设置样式，如下所示：

#theparagraph{
  color:green;
}

document.getElementById("theparagraph").style="color:blue";

我注意到，使用有序列表，您可以设置“marker”属性（或任何名称）的样式。这是排在有序列表项文本之前的单独编号。这是一个例子：

<ol>
  <li id="thelistitem">
    Hello there!
  </li>
</ol>

您可以通过执行以下操作在 CSS 中设置样式：

#thelistitem{
  color:blue;
}
#thelistitem::marker{
  color:red;
}

但是，我的问题是，javascript 中的等价物是什么？我尝试了以下方法，但没有成功：

document.getElementById("thelistitem").style="::marker{color:blue}";
document.getElementById("thelistitem").style::marker="color:blue";
document.getElementById("thelistitem").style.marker="color:blue";

None 其中有效果。什么有效？而且我不要求从元素中分配和带走的 class 。我问的是它的风格。如何编辑它？

Answer 1

虽然 JS 不能直接改变标记的颜色，因为它是一个伪元素，实际上不在 DOM 中，我们可以让它设置一个 CSS 实际的变量 'real' 元素并使用它来更改伪元素中的颜色。

#thelistitem {
  color: blue;
}

#thelistitem::marker {
  color: var(--color);
}

<ol>
  <li id="thelistitem">
    Hello there!
  </li>
</ol>
<button onclick="document.getElementById('thelistitem').style.setProperty('--color', 'red');">Click me</button>

Answer 2

JavaScript 无法操作伪元素，因为它们实际上并未出现在 DOM 树中，但您可以通过使用 CSS Variables![= 来实现您的目标。 13=]

ol li {
  color: #777;
}

ol li::marker {
  color: var(--custom-variable);
}

<ol>
  <li id="list_item">List Item 1</li>
</ol>

<button onclick="document.getElementById('list_item').style.setProperty('--custom-variable', '#000');">
  Change Color
</button>

我们刚刚将 --custom-variable 分配给颜色属性，并使用父元素的 JavaScript 中的 setProperty 操作其值。

您可以在 javascript 中设置有序列表编号的样式吗？如果是这样，如何？

Can you style ordered list numbers in javascript? If so, how?

html

javascript

css

styles

html-lists