Changing the class of a div

Question

<!doctype html>
<html>
<head>
<style>       
#sample{
    width:100px;
    height:100px;
    background-color:red;
}
.green {    
    background-color:green;    
}
</style>
</head>
<body>
     <div id="sample" ></div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  window.setTimeout(function(){
        $('#sample').addClass("green");
  }, 2000);

</script>
<html>

I want to change the background color of the div with id="sample" from red to green in 2 seconds.I added the javasript to add a class with a green background to the div after 2 seconds.But the added class fails to replace the background color of the div element.So is there any solution which can be applied here to change the background color in two seconds.Also i know it is possible,if we add an another class to toggle between the background colors.An another solution will be appreciated.

try giving ! important to background-color of green class eg: background-color:green !important; — SimarjeetSingh Panghlia, Dec 25 '14 at 07:16

score 3 · Answer 1 · edited May 23 '17 at 11:56

3

It's fails because the weight of ID more than the weight of CLASS:

id = 100
class, pseudo-class = 10
element, pseudo-element = 1

You can use id with class:

<body>
     <div id="sample" class="red"></div>
</body>

And then toggle from red to green. No need to use !important.

Moreover, if you want to change it with animation, you can use jQuery animate backgroundColor

edited May 23 '17 at 11:56

Community

1
1

answered Dec 25 '14 at 07:28

Andrei Shostik

342
1
4
17

Finally somebody else who knows about weights instead of just suggesting `!important`. I thought the world had gone mad. – GolezTrol Dec 25 '14 at 07:52
I also want to +1 GolezTrol. My two thoughts: `!important` and selecting by id should be avoided as much as possible, they dramatically increase the complexity of CSS and add far too much weight. – TheIronDeveloper Dec 26 '14 at 18:30

GolezTrol · Answer 2 · 2014-12-25T09:56:45.463

Cause

The problem is that an id-style is more important (has more 'weight') than a class style, so #sample has higher precedence than .green and the div remains red. There are many rules that dictate which CSS rules have precedence over others. Make sure to read about CSS rule Precedence, so whichever solution you choose, you know why you chose it and what are the consequences.

Fix

There are many ways to fix this, but they all boil down to making sure that the green rule overrules (is equally or more important than) the default red rule.

Solution (Best): Style on classes, not on IDs.

Add a class to the div that indicates what kind of box it is:

<div id="sample" class="samplecontainer"></div>

Now, in the CSS you can easily apply a default style to such elements, and overrule them too:

.samplecontainer {
  background-color: red;
}

.samplecontainer.valid,
/* Or just */
.valid
{
   background-color: green;
}

Now the CSS doesn't rely on specific elements, but on element definitions. You can say that containers are by default red, and are made green when they become 'valid' (whatever that may mean in this example). This way, you don't rely on ids in the CSS, which prevents very bulky CSS and the undesirable overrule you bumped into.

Note I renamed 'green' to 'valid' to make it more semantic. What if you want to change the border too, or make them blue instead of green? Then you would still need to dig into the JavaScript code, and also change the class names in CSS and possibly fixed style names in HTML and PHP. Or you can just leave the class name 'green' for the blue element, which is very confusing too. So a name describing the type or state (like valid, active, or whatever suits you best) is easier to read and to maintain.

Solution (Sub-optimal): Add Id to the green rule too

Try do change the css like this, so indicate that an element that has id 'sample' and class 'valid' should be green. I think this is quick fix and less optimal compared to the previous one, and your CSS may become bulky if you have many elements that can become green.

#sample.valid{
  background-color: green;
}

Solution (Poor): Adding inline style though JavaScript

Instead of adding a class through JavaScript, you can also add inline style. Inline styles (the style attribute), has higher precedence, so adding style="background-color: green" will overrule the color defined in CSS.

$('#sample').css('background-color', 'green');

I wouldn't much prefer this method, since you would have to dig in your JavaScript to change the styling, end it will get really clunkcy when you want to change other properties as well. Each of the solutions above are preferable over this one.

Solution (Poor and risky): Add !important

From CSSTricks: When Using !important is The Right Choice

The unfortunate typical use case goes like this:

WHY IS MY FRAGGLE ROCKING CSS NOT WORKING INTERROBANG

(use !important rule)

OK, now it's working

Then the next guy comes along and tries to make new changes. He tries to alter some existing CSS rules, but now his changes aren't behaving how they should....

There are some cases when !important might be the right choice, but it should never be the quick fix for a problem like this, because in the end you'll and up with a CSS that is very hard to maintain, and various !importants will bite each other. Only use it when you have really thought it through.

score 1 · Answer 3 · answered Dec 25 '14 at 07:27

<!doctype html>
<html>
<head>
<style>
       #sample{
                width:100px; 
                height:100px;
                /*Remove this from here*/
                /*background-color:red;*/
               }

        .green{ 
               background-color:green;
               }
        .red{ 
              /*Create a class for red alone*/

               background-color:red;
            }               

</style>
</head>
<body>
     <div id="sample" class="red" ></div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
        window.setTimeout(function(){

        // Calling removeClass with no parameters will remove all of the items's classes.
        $('#sample').removeClass();
        // Now add the class of green
        $('#sample').addClass("green");
        }, 2000);

</script>
<html>

score 0 · Answer 4 · edited Dec 25 '14 at 07:43

0

.green{ 
       background-color:green !important;
}

edited Dec 25 '14 at 07:43

Vsevolod Goloviznin

12,074
1
49
50

answered Dec 25 '14 at 07:19

Abhisek Malakar

867
1
10
18

score 0 · Answer 5 · answered Dec 25 '14 at 07:21

0

Change CSS to

.green{    
 background-color:green !important;
}

DEMO

answered Dec 25 '14 at 07:21

Syed Ali Taqi

4,898
3
34
44

score 0 · Answer 6 · answered Dec 25 '14 at 07:26

Please try this one and remove #simple style css
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

        window.setTimeout(function(){
        $('#sample').css({'background-color':'green'});
        }, 2000);   


</script>

score 0 · Answer 7 · answered Dec 25 '14 at 07:27

in the JavaScript you can use just like that you may find demo

var a;

function function_name() {
    a = 1;
    setInterval(new_function, 1000);
}

function new_function() {
    if (a === 1) {
        color = "requred_color";
        a = 2;
    } else {
        color = "another_color";
        a = 1;
    }

    document.body.style.background = color;
}

score -1 · Accepted Answer · answered Dec 25 '14 at 07:16

-1

change your green class like following

.green{ 
         background-color:green !important;
 }

Or try

$('#sample').css({background-color:"green"});

answered Dec 25 '14 at 07:16

Manish Parakhiya

3,732
3
22
25

Changing the class of a div

8 Answers8