How to dynamically remove a stylesheet from the current page

Question

Is there a way to dynamically remove the current stylesheet from the page?

For example, if a page contains:

Answer 1

This is for disable all <style> from html

// this disable all style of the website...
var cant = document.styleSheets.length
for(var i=0;i<cant;i++){
    document.styleSheets[i].disabled=true;
}

//this is the same disable all stylesheets
Array.prototype.forEach.call(document.styleSheets, function(element){
  try{
    element.disabled = true;
  }catch(err){}
});

Answer 2

To expand on Damien's answer, the test method (which returns true or false) would probably be a better fit than search and is slightly faster. Using this method would yield:

for (var i = 0; i < document.styleSheets.length; i++) {
    if (/searchRegex/.test(document.styleSheets[i].href)) {
        document.styleSheets[i].disabled = true;
    }
}

If you don't care about IE support this can be cleaned up with a for...of loop

for (const styleSheet of document.styleSheets) {
    if (/searchRegex/.test(styleSheet)) {
        styleSheet.disabled = true;
    }
}

Answer 3

This will disable any stylesheet matching the regular expression searchRegEx provided against the URL of each stylesheet.

let searchRegEx = /example.*/;

for (var i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].href.search(searchRegEx) != -1) {
        document.styleSheets[i].disabled = true;
    }
}

Answer 4

I found this page whilst looking for a way to remove style sheets using jquery. I thought I'd found the right answer when I read the following

If you know part of the url then you can remove just the one you're looking for: $('link[rel=stylesheet][href~="foo.com"]').remove();"

I liked this solution because the style sheets I wanted to remove had the same name but were in different folders. However this code did not work so I changed the operator to *= and it works perfectly:

$('link[rel=stylesheet][href*="mystyle"]').remove();

Just thought I'd share this in case it's useful for someone.

Answer 5

This will reset your page's styling, removing all of the style-elements. Also, jQuery isn't required.

Array.prototype.forEach.call(document.querySelectorAll('style,[rel="stylesheet"],[type="text/css"]'), function(element){
  try{
    element.parentNode.removeChild(element)
  }catch(err){}
});

Answer 6

Suppose you want to remove a class myCssClass then the most easy way to do it is element.classList.remove("myCssClass");