如何禁用CSS规则？

Question

I have the following CSS rule

#class {
    margin: 4px 5px 6px 7px;
    color: red;
}

What I usualy do is

document.getElementById('class').style.margin= '0px';

Then after doing that to reset I go the same step

document.getElementById('class').style.margin= '4px 5px 6px 7px';

How do I disable the margin using JavaScript\\JQuery instead of changing the value to 0 then reset it to 4px 5px 6px 7px

Answer 1

Can you make a second class and just add/remove it from your elements?

.margin {
    margin: 4px 5px 6px 7px;
    color: red;
}
.noMargin {
    margin: 0px
    color: red;
}

document.getElementById("class").classList.add('margin');    
document.getElementById("class").classList.remove('noMargin');

document.getElementById("class").classList.add('noMargin');
document.getElementById("class").classList.remove('margin');

Answer 2

The easiest solution here is to use classes, and use jquery or javascript to change the class of the element whenever you want different behavior as on button click in the example I have shown below.

 $("#add").click(function() { $("#exd").addClass('margin'); $("#exd").removeClass('no-margin'); }); $("#rem").click(function() { $("#exd").removeClass('margin'); $("#exd").addClass('no-margin'); }); 

 .no-margin { margin: 0px; } .margin { margin: 15px 15px 15px 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="exd">Example Div</div> <button id="add">Add margin</button> <button id="rem">Remove margin</button> 

Hope this is clear.

Answer 3

A slight alteration to Scath's answer

.margin {
    margin: 4px 5px 6px 7px;
    color: red;
}
.margin.noMargin {
    margin: 0px;
}

Then all you have to do is add/remove the noMargin class. More specific css rules take precedence.

Answer 4

The other answers are good, just wanted to share another way of doing this. You can keep your base CSS style rule:

#class {
    margin: 4px 5px 6px 7px;
    color: red;
}

And then add a noMargin class as others have suggested:

.noMargin {
    margin: 0; !important
}

And then, use toggleClass to switch it on/off:

document.getElementById('class').classList.toggleClass('noMargin');

The benefit here is that A) only one line of code to on/off the margin, B) only one extra CSS rule, and C) don't have to worry about whether the margin is currently on or off before switching it.