javascript - changing a class' style
Solution 1
Try the following
var all = document.getElementsByClassName('someClass');
for (var i = 0; i < all.length; i++) {
all[i].style.color = 'red';
}
Note: As Cheery pointed out getElementsByClassName
won't work in IE. The linked question has a nice way to work around this limitation
Solution 2
I find it easier to use CSS variables. You can set the class to use a variable and then change that value in Javascript, thus changing the CSS.
If you style the class like:
:root {
--some-color: red;
}
.someClass {
color: var(--some-color);
}
Then you can change the variable's value in Javascript with
document.documentElement.style.setProperty('--some-color', '(random color)');
(random color)
can then be anything that would be considered a valid CSS color (eg. blue
, black
, #626262
, rgb(12, 93, 44)
)
Updating the value in JS automatically updates the page as well.
And of course, this can be done with any property, not just color. Here is an example that changes the padding of a class:
CSS
:root {
--some-padding: 12px;
}
.someClass {
padding: var(--some-padding);
}
Javascript
// Set padding to 15px
document.documentElement.style.setProperty('--some-padding', '15px');
// Set padding to 5rem
document.documentElement.style.setProperty('--some-padding', '5rem');
// Set padding to 25%
document.documentElement.style.setProperty('--some-padding', '25%');
Useful example: toggle dark / light mode:
(How to use css properties to dynamically set css properties)
// set to light mode:
document.documentElement.style.setProperty('--bg-color', getComputedStyle(document.documentElement).getPropertyValue('--bg-color-light'));
// set to dark mode:
document.documentElement.style.setProperty('--bg-color', getComputedStyle(document.documentElement).getPropertyValue('--bg-color-dark'));
With the respective css:
:root {
--bg-color: black;
--bg-color-light: white;
--bg-color-dark: black;
body {
background-color: var(--bg-color);
}
Sources
How to declare and use CSS variables: https://www.w3schools.com/css/css3_variables.asp
How to update a CSS variable in JS: https://css-tricks.com/updating-a-css-variable-with-javascript/
Solution 3
var sheet = document.createElement('style')
sheet.innerHTML = ".someClass {color: red;}";
document.body.appendChild(sheet);
Solution 4
What you want to change is the style sheet, I guess? Thats possible in Javascript, see
- Quirksmode: Change CSS
- Totally Pwn CSS with Javascript (in Internet Archive)
- Is the only way to change a style to do it per-element in JavaScript? (possible duplicate)
I'm afraid there is no library for that, I really would like to see one...
Solution 5
var all = document.getElementsByClassName('someClass');
for (var i = 0; i < all.length; i++) {
all[i].className += " red";
}
For better coding style add another class to the elements with the code above and then use CSS to change the color of all elements like this:
.red {
color:red;
}
user1231410
Updated on February 01, 2022Comments
-
user1231410 over 2 years
I've been working with jQuery for a while, but now I want to write something in pure javascript and it's prooving to be challenging.. One of my biggest problems at the moment is that I haven't found a way to set/change styling for a class. This is not a problem for elements with id, but I want to change the styling for a group of elements with the same class and not just for one element with an id.. In jQuery I would just write:
$('.someClass').css('color','red')
Is there really no simple equivalence to this in pure js?
-
Cheery about 12 yearsIE before 9 does not support it. stackoverflow.com/questions/7410949/…
-
nana about 12 yearsOr even "for(i in all)", at least I believe it works in non strict mode too.
-
Paul Brewczynski almost 11 yearsIt is good but it won't update if next element with that class will be created. Right ?
-
Fabio about 3 yearsGenius!! Should be marked as the best answer.
-
Brethlosze about 3 yearsThe best ans superior answer by far. Do not mess with pesky for cycles, when you can use variables inside the CSS...
-
Lucio Menci over 2 yearsGreat answer! PS: I think you done a typo. The variable name is «--some-padding» inside the css section, but it's «--some-color» inside the javascript section.
-
Eliatiscom over 2 years@LucioMenci you're absolutely correct, I edited the answer. Thx