How to change CSS style rule within an embedded CSS using JavaScript

Question

So how would I change the CSS styles within embedded CSS with JavaScript only? ex. if this is in the head of the HTML file:

<style>
.middleBTN {
background-color:red;
}
</style>

How would I change it to this within the embedded <style> using JavaScript only?

<style>
.middleBTN {
background-color:blue;
}
</style>

I have an element on a page that does not respond to dynamically changing the color using a JavaScript function. It will however respond to a change from the stylesheet or from the embedded CSS styles.

Please provide an minimal reproducible example of "an element on a page that does not respond to dynamically changing the color using a JavaScript function". — Heretic Monkey
– Heretic Monkey, Commented Nov 4, 2021 at 19:09
I'm not convinced you need to do what you're attempting to do, but if you did, reading up on CSSOM would probably be a good place to start. — ray
– ray, Commented Nov 4, 2021 at 19:10
Please explain how you are trying to override the CSS with JS, elements should respond fine to js even if their styles are declared as you put — yuuuu
– yuuuu, Commented Nov 4, 2021 at 19:11
JavaScript cannot actually do what you requested, because JavaScript can't change that class attribute values. Instead you can actually achieve that with the cssom, document.getElementById(id).style.backgroundColor = 'blue' — Fritzdultimate
– Fritzdultimate, Commented Nov 4, 2021 at 19:22

sanepete · Accepted Answer · 2021-11-04 19:18:50Z

1

The usual way would be to add two styles:

<style>
.middleBTNred
{
 background-color:red;
}
.middleBTNblue
{
 background-color:blue;
}
</style>

then change the class of the button with javascript:

document.getElemenyById('myawesomebutton').className='middleBTNblue';

You are trying to change the style of ALL the red buttons so a more appropriate approach would be:

var myawesomebuttons=document.getElemenyByClassName('middleBTNred');
for(var i=0;i<myawesomebuttons.length;i++)
{
 myawesomebuttons[i].className='middleBTNblue';
}

Or the jquery equivalent.

answered Nov 4, 2021 at 19:18

sanepete

1,20212 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ray Over a year ago

To avoid the risk of wiping out other classes on the same element you should use classList.replace instead of explicitly setting className to a string.

Rivered Over a year ago

@ray hatfield Wouldn't this replace the entire classlist?

ray Over a year ago

No. It replaces one class (if present) with another, without affecting the rest of the list. The documentation is linked above.

Collectives™ on Stack Overflow

How to change CSS style rule within an embedded CSS using JavaScript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related