[ACCEPTED]-Unload CSS from webpage-javascript

Accepted answer
Score: 68

Take the link element and disable it

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

0

Score: 31

With jquery, this works:

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

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

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

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

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

Score: 3

Oddly enough, IE and firefox support the 3 disabled attribute, but neither Chrome, Safari, nor 2 Opera support it. So, this should be the 1 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] );

More Related questions