CODEWITHSUNDEEP
javascript
Alec Smart
Alec Smart

Reputation: 95900

Unload CSS from webpage

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?

Upvotes: 57

Views: 27354

Answers (4)

Jack G
Jack G

Reputation: 5322

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

Upvotes: 3

Gullbyrd
Gullbyrd

Reputation: 1571

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.

Upvotes: 32

meder omuraliev
meder omuraliev

Reputation: 186562

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.

Upvotes: 9

Xinus
Xinus

Reputation: 30533

Take the link element and disable it

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

Upvotes: 77

Related Questions