Tengo una página web con css y algunos colores de texto en este css:
h1 { color:red; } .tdform { color:red; .. } .textform, .passform, .buttonform { color:red; .. } ..Deseo cambiar esta estructura para poder tener acceso a todos estos colores (para cambiarlos) a través de una llamada de javascript de una sola línea, en el estilo:
document.getElementByXYZ('newElement').color = blue;Y no :
document.getElementsByClassName('h1').style.color = blue; document.getElementsByClassName('tdform').style.color = blue; document.getElementsByClassName('textform').style.color = blue; ...¿Cuál es por favor la mejor manera?
Hay 2 formas de hacerlo.
document.getElementById('color-toggle').addEventListener('click', e => { document.querySelector('.container').classList.toggle('green'); }); .container { color: red; } .container.green { color: green; } .container button { color: inherit } <div class="container"> <h2>Title</h2> <p>Paragraph</p> <button id="color-toggle">Toggle Color</button> </div> document.getElementById('color-toggle').addEventListener('click', e => { document.querySelector('.container').classList.toggle('green'); }); :root { --text-color: red; } .container.green { --text-color: green; } .title { color: var(--text-color); } .paragraph { color: var(--text-color); } .button { color: var(--text-color); } <div class="container"> <h2 class="title">Title</h2> <p class="paragraph">Paragraph</p> <button id="color-toggle" class="button">Toggle Color</button> </div>En el ejemplo anterior, las propiedades personalizadas de CSS se usan en combinación con Cascading. También puede actualizar directamente las variables CSS desde Javascript .
Eso sí, los elementos pueden tener varias clases:
<h1 class="custom-color h1"></h1> <td class="custom-color tdform"></td> <form class="custom-color textForm"></form>La forma más directa y eficiente de cambiar todos sus colores juntos es usar su clase común. Esa es la esencia de las clases css:
for (var e of document.querySelectorAll(".custom-color")) { e.style.color = "red"; }