CODEWITHSUNDEEP
javascriptjquerycssstylesheet
Nathan Osman
Nathan Osman

Reputation: 73295

How to dynamically remove a stylesheet from the current page

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

For example, if a page contains:

<link rel="stylesheet" type="text/css" href="http://..." />

...is there a way to later disable it with JavaScript? Extra points for using jQuery.

Upvotes: 55

Views: 81184

Answers (9)

Damien
Damien

Reputation: 1538

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

Upvotes: 9

jrgermain
jrgermain

Reputation: 11

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

Upvotes: 1

user257319
user257319

Reputation:

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

Upvotes: 4

eon
eon

Reputation: 1938

Nobody has mentioned removing a specific stylesheet without an ID in plain Javascript:

 document.querySelector('link[href$="something.css"]').remove()

("$=" to find at end of href)

Upvotes: 6

Sir Robert
Sir Robert

Reputation: 4976

If you know the ID of the stylesheet, use the following. Any other method of getting the stylesheet works as well, of course. This is straight DOM and doesn't require using any libraries.

var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);

Upvotes: 28

AtashG79
AtashG79

Reputation: 1

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

Upvotes: -4

Brian Donovan
Brian Donovan

Reputation: 8390

Well, assuming you can target it with jQuery it should be just as simple as calling remove() on the element:

$('link[rel=stylesheet]').remove();

That will remove all external stylesheets on the page. 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();

And in Javascript

this is an example of remove all with query selector and foreach array

Array.prototype.forEach.call(document.querySelectorAll('link[rel=stylesheet]'), function(element){
      try{
        element.parentNode.removeChild(element);
      }catch(err){}
    });

//or this is similar
var elements = document.querySelectorAll('link[rel=stylesheet]');
for(var i=0;i<elements.length;i++){
    elements[i].parentNode.removeChild(elements[i]);
}

Upvotes: 72

DarckBlezzer
DarckBlezzer

Reputation: 4794

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

Upvotes: 1

user5936810
user5936810

Reputation: 121

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.

Upvotes: 11

Related Questions