I have a webpage with css, and some text colors in this css :
h1 {
color:red;
}
.tdform {
color:red;
..
}
.textform, .passform, .buttonform {
color:red;
..
}
..
I wish to change this structure to can have access to all these colors (for changing them) through a single line javascript call, in the style :
document.getElementByXYZ('newElement').color = blue;
And not :
document.getElementsByClassName('h1').style.color = blue;
document.getElementsByClassName('tdform').style.color = blue;
document.getElementsByClassName('textform').style.color = blue;
...
What is please the best way ?
There are 2 ways to do that.
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>In the example above CSS Custom Properties are used in combination with Cascading. You can also directly update CSS Variables from Javascript.
Mind you, elements can have multiple classes:
<h1 class="custom-color h1"></h1>
<td class="custom-color tdform"></td>
<form class="custom-color textForm"></form>
The most straight forward and efficient way to change all their colors together is to use their common class. That's the essence of css classes:
for (var e of document.querySelectorAll(".custom-color")) {
e.style.color = "red";
}