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

score 4 · Answer 1 · answered Aug 04 '15 at 19:10

4

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 04 '15 at 19:10

Reflective

3,854
1
13
25

1

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?) – Jason Aug 04 '15 at 19:14
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 – Reflective Aug 04 '15 at 19:21

score 1 · Answer 2 · answered Aug 04 '15 at 19:03

1

To remove all style on an element, you could do

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

answered Aug 04 '15 at 19:03

Scott Schwalbe

430
2
4

Jason · Answer 3 · 2015-08-04T19:19:56.233

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

I was about to write similar thing ... but you have saved my efforts :) — Reflective, Aug 04 '15 at 19:35
@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? — King Cash, Aug 04 '15 at 21:09

score 0 · Answer 4 · answered Aug 04 '15 at 19:17

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

Disable/Enable CSS on webpage using Javascript

4 Answers4