CODEWITHSUNDEEP
javascripthtmlcss
Najib Razak
Najib Razak

Reputation: 149

How to disable and enable css rule

For example if i have

<style type='text/css' id='divcolorgreen'>
    div{
        color: green;
    }
</style>

I can disable the css rule using 3 ways

Is there any easier way to disable/remove the css rule?

Upvotes: 4

Views: 5122

Answers (3)

NullPoiиteя
NullPoiиteя

Reputation: 57312

1 you can do this by jquery css( propertyName , value ) api but according to me the easier way because if there is many style like you have set the font ,color ,height,...the second method is easier and lot more time saving 

 $("div").css("color", "yellow")

2 you can do this by removeClass('someClass'); and addClass('someClass');

for example, use a jQuery selector to target the division element with the class "some"

html

<div class="some" ></div>

css

.some{ color: green; }

jquery

if you want to add another class can use the addClass 

$(".some").click( function(){
   $(this).addClass('someClass');
});

If you would like to remove the class, use jQuery's removeClass method:

$(".some").click( function(){
   $(this).removeClass('someClass');
});

Upvotes: 1

sachleen
sachleen

Reputation: 31121

OK, so you are trying to change the color of all divs on a page.

jQuery has .css() which lets you set the style of all elements that match the selector. In your case, it's just div.

To set:

$('div').css('color', 'yellow');

To remove:

$('div').css('color', '');

If you don't want to use jQuery, the idea is the same:

document.getElementsByTagName('div') gives you all divs on the page. You can loop through them and change their style by elem.style.color="yellow";

Upvotes: 1

Tadeck
Tadeck

Reputation: 137300

This is the purpose of classes. By assigning a class eg. to the <body> tag, you get the same functionality:

<style type='text/css' id='divcolorgreen'>
    body.divcolorgreen div{
        color: green;
    }
</style>

And then if <body> looks like this:

<body class="divcolorgreen">
    ...
</body>

the rule is applied. To disable the rule, remove the mentioned class:

<body>
    ...
</body>

Upvotes: 7

Related Questions