Digamos que tienes un elemento HTML así:
<p id="theparagraph">Hello there!</p>Puede diseñarlo usando CSS o javascript, respectivamente, así:
#theparagraph{ color:green; } document.getElementById("theparagraph").style="color:blue";Me ha llamado la atención que, con una lista ordenada, puede diseñar el atributo "marcador" (o como se llame). Este es el número individual que viene antes del texto de un elemento de la lista ordenada. Aquí hay un ejemplo:
<ol> <li id="thelistitem"> Hello there! </li> </ol>Puede diseñarlo en CSS haciendo lo siguiente:
#thelistitem{ color:blue; } #thelistitem::marker{ color:red; }Pero, mi pregunta es, ¿cuál es el equivalente a eso en javascript? He intentado lo siguiente, sin éxito:
document.getElementById("thelistitem").style="::marker{color:blue}"; document.getElementById("thelistitem").style::marker="color:blue"; document.getElementById("thelistitem").style.marker="color:blue";Ninguno de ellos ha trabajado. ¿Qué SÍ funciona? Y no pido una clase que se le asigne y se le quite a los elementos. Estoy preguntando por el estilo de la misma. ¿Cómo se editaría?
Si bien JS no puede alterar directamente el color del marcador ya que es un pseudo elemento, no en el DOM, podemos hacer que establezca una variable CSS del elemento 'real' real y usarlo para cambiar el color en el pseudo elemento.
#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>JavaScript no puede manipular pseudoelementos porque en realidad no se presentan en el árbol DOM, ¡pero puede hacer una solución para lograr su objetivo usando variables CSS !
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>Acabamos de asignar --variable personalizada a la propiedad de color y manipulamos su valor usando setProperty en JavaScript para el elemento principal.