Question

Using Javascript, I would like change the background color of the numbers in an ordered HTML list. The background color of the list content should not change.
How can I achieve this ?

Answer 1

Based on the following article : Style Ordered List with CSS, if you have some HTML code like this :

<ol id="list">
  <li>
    <p>this is some text</p>
  </li>
  <li>
    <p>and some other text</p>
  </li>
</ol>

Then, using a CSS that looks like this :

ol {
  background: red;
}
li {
  background: white;
}
p {
  margin: 0px;
}

Might get you something like what you’re asking for : here’s the result I get (only tested with Firefox) :

_{(source: pascal-martin.fr)}

(There are more explanations on the article I linked to at the beginning of my answer)

EDIT after the comment : ooops, didn’t see that part ; sorry 🙁

Now that you have an ordered list, with a specific color as background for the numbers, you can plug-in some Javascript code, to change that color.

Considering that the <ol> tag I used here as id="list", you can change its background-color with the following portion of JS code :

document.getElementById('list').style.backgroundColor = 'blue';

After this is executed, you’ll get something that looks like the following :

_{(source: pascal-martin.fr)}