Disable/Enable CSS on webpage using Javascript

Question

According to This page I was able to remove all the CSS preloaded and added on the webpage using that. I wanted to implement a button system where "onclick" = enable/disable webpage CSS even the ones pre-loaded by my web-host. I would like to eliminate the style tags to prevent lags for my website users. I prefer using the script that I have linked above unless there is another alternative that works better. Is it possible to enable CSS onclick the same button to disable? If not is it possible, can it be done with this quick? example with the preferred script below:

if (disable) {
style = "disable";
} else {
location.reload();
}

PREFERRED SCRIPT:

function removeStyles(el) {
  el.removeAttribute('style');

  if(el.childNodes.length > 0) {
    for(var child in el.childNodes) {
        /* filter element nodes only */
        if(el.childNodes[child].nodeType == 1)
            removeStyles(el.childNodes[child]);
    }
  }
}

removeStyles(document.body);

Reflective · Accepted Answer · 2015-08-04 19:10:20Z

6

What about a different aproach? Add initially a class to a body called 'styled' for example

<body class="styled">

use it as a main selector in your css definitions

<style>
    .styled a { ... }
    .styled h1 { .... }
</style>

then an example jquery script to toggle the class:

<script>
    $(function() {
      $('#myswitch').click(function() {
         $('body').toggleClass('styled');
      });
    });
</script>

when class is present, the page will be styled, when absent there will be no styling.

Of coures there could be better aproach, but this is the first thing which pops up in my mind

answered Aug 4, 2015 at 19:10

Reflective

3,9371 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Over a year ago

Nice and simple! ... the only downside would be if he didn't have control over the styles because they were being inserted by something else (the OP mentioned being pre-loaded by the webhost?)

Reflective Over a year ago

yep, that's a good note ... stripping the initial inline css is not a problem, but returning it back is not a simple task unless a reload is performed

Scott Schwalbe · Accepted Answer · 2015-08-04 19:03:11Z

2

To remove all style on an element, you could do

function removeStyles(el) {
  el.style = {};
}

answered Aug 4, 2015 at 19:03

Scott Schwalbe

5402 silver badges4 bronze badges

Comments

Jason · Accepted Answer · 2015-08-04 19:19:56Z

2

If you want to enable/disable the CSS on the page, then the goal is not to merely remove all the styles on the page, but you will need to save them somewhere also so they can be recalled when the user re-clicks the button. I would recommend having jQuery to help you with this, and it could be done the following way:

var style_nodes = $('link[rel="stylesheet"], style');
style_nodes.remove();

$('*').each(function(num, obj) {
    var style_string = $(obj).attr("style");
    if (style_string) {
        $(obj).data("style-string", style_string);
        $(obj).attr("style", "");
    }
});

Now you've saved the stylesheets and style DOM nodes inside of style_nodes, and the actual style attribute inside of a jQuery data attribute for that specific DOM node. When you click to add the CSS back to the page, you can do the following:

$('head').append(style_nodes);
$('*').each(function(num, obj) {
    if ($(obj).data("style-string"))
        $(obj).attr("style", $(obj).data("style-string"));
});

edited Aug 4, 2015 at 19:19

answered Aug 4, 2015 at 19:13

Jason

32.7k8 gold badges63 silver badges81 bronze badges

2 Comments

Reflective Over a year ago

I was about to write similar thing ... but you have saved my efforts :)

King Cash Over a year ago

@jason I'm sorry my knowledge is very limited in jQuery so I was wondering, how can I set up something like this jsfiddle.net/5krLn3w1 using your script?

Jocko · Accepted Answer · 2015-08-04 19:17:22Z

Check out this JS Fiddle I put together to demonstrate it: https://jsfiddle.net/5krLn3w1/

Uses JQuery, but I'm sure most frameworks should give you similar functionality.

HTML:

<h1>Hello World</h1>
<a href="#" id="turn_off">Turn off CSS</a>
<a href="#" id="turn_on">Turn on CSS</a>

JS:

$(document).ready(function() {
    $('a#turn_off').click(function(evt) {
        evt.preventDefault();
        var css = $('head').find('style[type="text/css"]').add('link[rel="stylesheet"]');
        $('head').data('css', css);
        css.remove();
    });

    $('a#turn_on').click(function(evt) {
        evt.preventDefault();
        var css = $('head').data('css');
        console.info(css);
        if (css) {
            $('head').append(css); 
        }
    });
});

CSS:

body {
    color: #00F;
}

h1 {
    font-size: 50px;
}

Collectives™ on Stack Overflow

Disable/Enable CSS on webpage using Javascript

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related