CODEWITHSUNDEEP
javascriptjquerycss
MichalS
MichalS

Reputation: 33

turning CSS on / off globally

My goal is to have a button (controlled by a javascript function) that would toggle the entire CSS on the website on and off. I thought this was a common practice and was surprised when I couldn't find a complete solution here or on the web.

Here is what I got.

$("#button").click(function() {
    var css = (document.styleSheets[0].enabled = true);
    if (css == true)
    {
        document.styleSheets[0].disabled = true;
        css =  (document.styleSheets[0].enabled = false);
    }
    else if (css == false)
    {
        document.styleSheets[0].disabled = false;
    }   
});

A simple Jquery function that targets the button by ID and performs an if test. I could've ommited the variable, but this way I am able to check the value easily in console.log. I am able to turn the CSS off, but not back on. The program doesn't even get to the else condition. I am aware that the else if is not really appropriate, but with just else (and even just with another if condition) the function doesn't run at all.

Second option that I thought of, and which might be much easier is just dynamically changing the contents of the link href attribute, where the path to the css file is given. But I am struggling to target the href element with Javascript.

Upvotes: 0

Views: 101

Answers (5)

elixenide
elixenide

Reputation: 44831

Your problem is that you are doing an assignment when you should be doing an equality check.

You have

var css = (document.styleSheets[0].enabled = true);

But you are really trying to do an equality check, i.e.,

var css = (document.styleSheets[0].enabled == true);

Notice the extra =. The single = does an assignment, so your current code is equivalent to this:

document.styleSheets[0].enabled = true
var css = document.styleSheets[0].enabled; // i.e., true

Because you set enabled to true, your if (css == true) condition is always satisfied, so your code always turns the CSS off and never turns it back on.

The fix, as Paul S. wrote in his answer, is just to toggle the value of document.styleSheets[0].disabled, as in:

$("#button").click(function() {
    document.styleSheets[0].disabled = !document.styleSheets[0].disabled;
});

There's no need to set and track a new property enabled.

Upvotes: 1

user4639281
user4639281

Reputation:

Well, for one you need to loop through all of the stylesheets.

Also, you can save some lines of code by using a counter, then on each button click increment the counter and use the % modulo operator to turn that into a 1 or a 0, which you can then coerce a boolean from using !!.

var count = 0;
var sheets = document.styleSheets;

$("#button").click(function() {
    for(var i in Object.keys(sheets)) sheets[i].disabled = !!(++count % 2);
});
.demo {
  background: #888;
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="demo">Some Text</div>
<button id="button">Click It</button>

Upvotes: 1

Paul S.
Paul S.

Reputation: 66334

This is a simple Boolean toggle so write it as a simple toggle

$("#button").click(function() {
    var sheet = document.styleSheets[0];
    sheet.disabled = !sheet.disabled;
});

As for why your code isn't working as is,

var css = (document.styleSheets[0].enabled = true);
// same as
var css;
document.styleSheets[0].enabled = true;
css = true;

which means

if (css == true)
// same as
if (true == true)

which always holds so you'll always follow this code path

Upvotes: 2

Arshad Mohammad
Arshad Mohammad

Reputation: 409

If you want to modify every href in your DOM,

just use 

 $('a[href*=]').each(function () {
                var $this = $(this);
                $this.attr('href', $this.attr('href').replace();
            });

Upvotes: 0

dave
dave

Reputation: 64657

The issue seems to be that you are doing assignment, and not comparison, on this line:

var css = (document.styleSheets[0].enabled = true);

It should be

var css = (document.styleSheets[0].enabled == true);

Probably simpler, since you have a jquery tag on the question, to just do:

$stylesheets = $('link[rel="stylesheet"]');
$("#button").click(function() {
    $stylesheets.attr('disabled', !$stylesheets.attr('disabled'));
});

Upvotes: 0

Related Questions