change color of pseudo-element based on class name Javascript

I have a pseudo-element (markers) whose color should change color when a particular class is loaded.

html –

<ol>
    <li>
       ::marker
       <span class='be_blue'> First </span>
    </li>
</ol>

If the class name=’be_blue’ then the marker should also be blue else it should remain black. This has to be done from Javascript

const markerColor = document.getElementByClassName('be_blue')

After getting element what should I do?

Answer

You can add class to li dynamically and add css on it to change marker color

const markerColor = document.getElementsByClassName('be_blue');

for (i = 0; i < markerColor.length; i++) {
  const par = (markerColor[i].parentNode);
  par.classList.add("blue");
}
ol li::marker {
  color: black;
}

ol li.blue::marker {
color: blue;
}
<ol>
    <li>
       <span class='be_blue'> First </span>
    </li>
    <li>
       <span class='be_blue'> Secomd </span>
    </li>
    <li>
       <span class='be_blue'> Third </span>
    </li>
</ol>