Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

  • removing the style element (reappend it to reenable)
  • modifying it's inner html
  • add the inline rule one by one to each elements (better using jquery)

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

like image 820
Najib Razak Avatar asked Jan 15 '23 14:01

Najib Razak


2 Answers

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>
like image 117
Tadeck Avatar answered Jan 23 '23 15:01

Tadeck


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";

like image 33
sachleen Avatar answered Jan 23 '23 13:01

sachleen