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

Question

Lets say you have an HTML element like so:

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

You can style it by using CSS or javascript, respectively, like so:

#theparagraph{
  color:green;
}

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

It has come to my attention that, with an ordered list, you can style the "marker" attribute (or whatever it is called). This is the individual number that comes before the text of an ordered list item. Here is an example:

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

You can style it in CSS by doing the following:

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

But, my question is, what is the equivalant for that in javascript? I have tried the following, with no success:

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

None of them have worked. What DOES work? And I am not asking for a class that is assigned and taken away from elements. I am asking for the style of it. How would one edit it?

Does this answer your question? [Changing CSS pseudo-element styles via JavaScript](https://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via-javascript) — Jacob G, Oct 12 '21 at 20:08
[this](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) is a better duplicate, however you should check the second answer, not the accepted one. The short answer is: add a stylesheet / style rule to the document: https://jsfiddle.net/ar6pnb2g/ — , Oct 12 '21 at 20:10

score 1 · Accepted Answer · answered Oct 12 '21 at 20:27

While JS cannot directly alter the color of the marker as it's a pseudo element, not actually in the DOM, we can get it to set a CSS variable of the actual 'real' element and use that to change the color in the pseudo element.

#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>

score 1 · Answer 2 · answered Oct 12 '21 at 21:47

JavaScript cannot manipulate pseudo elements because they aren't actually presented in the DOM tree, But you can do a workaround to achieve your goal by using CSS Variables!

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>

We just assigned --custom-variable to color property, and manipulated its value using setProperty in JavaScript for the parent element.

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

2 Answers2