8

can someone tell me how can i change css class property by javascript? example:

.winner
{
    background-color: white;
}

How can I change value of class winner background-color. When I write: var some = document.querySelector("winner"); I get button with class winner. I want this class not element of html. How can i get it?

Dawid G
  • 87
  • 1
  • 1
  • 4
  • 1
    You mean you want to actually change the rule? – epascarello Mar 07 '18 at 23:01
  • You're looking for the CSSOM. – SLaks Mar 07 '18 at 23:01
  • 1
    https://stackoverflow.com/questions/1409225/changing-a-css-rule-set-from-javascript – epascarello Mar 07 '18 at 23:01
  • 1
    You can change the elements' styling with [**`Element.style`**](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style); don't bother trying to change the rules in the stylesheet itself. – Obsidian Age Mar 07 '18 at 23:01
  • 1
    why change the definition of a style class, rather than have another class that defines the alternate styling, and then just changing the class attribute of the object? –  Mar 07 '18 at 23:05

2 Answers2

10

There are a few ways you could do this:

On top of your current class in your .css file, you could add another class in there, and then just switch the HTML elements to belong to that new class. You would need to loop through all the elements with that class name and change them to the new name:

CSS:

.winner
{
    background-color: white;
}

.winnerBlue
{
    background-color: blue;
}

JavaScript:

var winnerClassElements = document.getElementsByClassName("winner");
for(var i = 0; i < winnerClassElements.length; i++)
{
    document.getElementById(winnerClassElements.item(i)).className = "winnerBlue";
}

You could also add some style elements to your HTML file with this JavaScript code:

var editCSS = document.createElement('style')
editCSS.innerHTML = ".winner {background-color: blue;}";
document.body.appendChild(editCSS);

I know you didn't ask for jQuery, but if you already have it included, this is a very simple solution:

$('.winner').css("background-color" , "blue");
JCollier
  • 1,102
  • 2
  • 19
  • 31
  • 1
    I offered it as an option because sometimes the asker already has jQuery included, and on top of that, they often don't know what to ask for, especially if they are new to a language. If they had known what to ask for, in a lot of cases I bet they would have included jQuery in their question tags. – JCollier Mar 07 '18 at 23:24
  • 1
    If you want to offer a solution that uses something that was not tagged, it should be a comment. Please keep your answers on-topic. – Scott Marcus Mar 08 '18 at 00:36
5

The way to accomplish this is to either remove the class from being applied or apply another class that overrides the first. The DOM Element classList property is the key.

document.querySelector("input").addEventListener("click", function(){
  document.querySelector("h1").classList.remove("normal");
  document.querySelector("h1").classList.add("special");  
});
.normal { background-color:purple; }
.special { background-color:yellow; }
<h1 class="normal">Just some text</h1>
<input type="button" value="Click to change style">
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71