How to change className using javascript?

Question

Code

window.onload = function() {
  var refButton = document.getElementById("old");
  refButton.onmouseover = function() {
    refButton.className = 'newClass';
  }
};

.newClass {
  color: white;
}
#old {
  color: blue;
}

<div id="old">
  Hello
</div>

If instead of ClassName I type style.color="red" then the code works.

I wonder what the problem is.

It's working, your class is applied. However, the color from the #old rule is overwriting the color, hence it stays blue. — spaceman
– spaceman, Commented May 9, 2016 at 23:21
Why is this question getting downvoted? looks like a very valid question — Adam Buchanan Smith
– Adam Buchanan Smith, Commented May 9, 2016 at 23:28
it's elementary, that's why - need to learn selector precedence. — Bekim Bacaj
– Bekim Bacaj, Commented May 9, 2016 at 23:41

dippas · Accepted Answer · 2016-05-09 23:31:54Z

6

It is because of CSS specificity, so just add #old to your .newClass

.newClass has a specificity of : 0 0 1 0
#old has a specificity of : 0 1 0 0

therefore #old is more specific.

using #old.newClass you get 0 1 1 0 which is going to be more specific and will apply the new style you want.

You can calculate the CSS specificity here

window.onload = function() {
  var refButton = document.getElementById("old");
  refButton.onmouseover = function() {
    refButton.className = 'newClass';
  }
};

#old.newClass {
  color: red;
  /* changed for demo */
}
#old {
  color: blue;
}

<div id="old">
  Hello
</div>

edited May 9, 2016 at 23:31

answered May 9, 2016 at 23:25

dippas

60.8k15 gold badges125 silver badges134 bronze badges

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

1 Comment

Guinea guinea Over a year ago

ThankYou. Is there anything else I should take care of? Stuff like this is not generally taught in tutorials.

Nineteen Amadeus · Accepted Answer · 2016-05-10 02:44:53Z

0

if you're try to have a mouse hover effect, you can do it by replacing 'newClass' with

#old:hover{color:white;}

jsfiddle demo here

and just like adeneo's comment link said,

#old{color:blue;} //id selector

has higher priority than

.newClass{color:white;} //class selector

That's why the assignment doesn't work

answered May 10, 2016 at 2:44

Nineteen Amadeus

11 bronze badge

Collectives™ on Stack Overflow

How to change className using javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related