Unload CSS from webpage

Question

Am wondering how it would be possible to unload a CSS from a page. e.g. In my page I have included a file called a.css. Now I want the user to be able to change the theme, which is CSS driven, thus he/she should be able to unload a.css and then I can load b.css (else they will conflict)

Any idea how to go about this?

I do not know how, but the ExtJS framework offers such kind of functions, so if the solutions here do not work, you could have a look there.... — TheHippo, Oct 21 '09 at 10:14

score 73 · Accepted Answer · answered Oct 21 '09 at 05:42

73

Take the link element and disable it

document.getElementsByTagName('link')[0].disabled = true;

answered Oct 21 '09 at 05:42

Xinus

29,617
32
119
165

This is wrong because the link tag is not used only for CSS. See this page https://www.w3schools.com/tags/tag_link.asp – Cpp Forever Apr 02 '19 at 13:01
4

@CppForever Yes. But at the same time the answer is still valid and helpful since it leads us in the right direction. If needed, we can check the values of `href`, `rel`, etc. Such operations, however, are just implementation details. At least, the answer is not "wrong" as you say, I believe. – ynn May 17 '20 at 06:59
2

One important warning is that `link` doesn't support `disabled` attribute (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled)). Actually it may work but that's not standard-compliant. – ynn May 18 '20 at 10:09

score 32 · Answer 2 · edited Sep 02 '13 at 12:55

32

With jquery, this works:

$("link[href='fileToRemove.css']").remove();

Obviously, replace fileToRemove.css with the relative path and filename of the file to be unloaded.

edited Sep 02 '13 at 12:55

Rene Pot

24,681
7
68
92

answered Jan 18 '11 at 22:24

Gullbyrd

1,545
1
16
14

7

I had to put the filename in quotes to make it work e.g. $("link[href='test.css']").remove(); – guido Nov 10 '11 at 12:38
6

If you don't want to put the path, you can add a * before equal sign. $("link[href*='fileToRemove.css']").remove(); – Dubbo May 12 '15 at 02:20
what is jQuery? – jenson-button-event Jun 17 '18 at 17:06

meder omuraliev · Answer 3 · 2009-10-21T05:49:49.480

9

var firstLink = document.getElementsByTagName('link')[0];
firstLink.parentNode.removeChild(firstLink)

This would remove the first link element on the page - not sure how your html is structured but I'm sure you can use it as an example. You might want to check the type attribute if it's 'text/css' and you're targeting the right media (screen), or possibly check if the href contains 'css' anywhere if you have other link elements that aren't css references.

Note you can also re-set the href attribute to point to a non-existing page instead of removing the element entirely.

edited Oct 21 '09 at 05:49

answered Oct 21 '09 at 05:40

meder omuraliev

183,342
71
393
434

Isn't it better to use an id for the link tag? – rahul Oct 21 '09 at 05:42
It's uncommon to see the id attribute set on the link element but I'm sure for this exact purpose the OP would probably want to, less parsing and dealing with multiple link elements.. good idea. – meder omuraliev Oct 21 '09 at 05:44
I like your solution better though, setting an attribute instead of removing it entirely. – meder omuraliev Oct 21 '09 at 05:56

Jack G · Answer 4 · 2020-08-30T18:36:22.187

Oddly enough, IE and firefox support the disabled attribute, but neither Chrome, Safari, nor Opera support it. So, this should be the most cross-browser solution.

// Disables a particular stylesheet given its DOM Element
function unload_stylesheet(DOMelement){
    DOMelement.disabled = true;
    DOMelement.parentNode.removeChild( DOMelement );
    DOMelement.href = "data:text/css,"; // empty stylesheet to be sure
}

// Usage:
unload_stylesheet( document.getElementsByTagName('link')[0] );

Unload CSS from webpage

4 Answers4

Linked