从网页上卸载CSS

Question

我想知道如何从页面卸载CSS。例如在我的页面中，我添加了一个名为a.css的文件。现在我希望用户能够更改主题，这是CSS驱动的，因此他/她应该能够卸载a.css然后我可以加载b.css（否则它们会发生冲突）

知道如何解决这个问题吗？

Answer 1

获取link元素并将其禁用

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

Answer 2

使用jquery，这可行：

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

显然，将fileToRemove.css替换为要卸载的文件的相对路径和文件名。

Answer 3

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

这会删除页面上的第一个链接元素 - 不确定你的html是如何构造的，但我相信你可以用它作为例子。您可能想要检查type属性，如果它是'text / css'并且您的目标是正确的媒体（屏幕），或者如果您有其他链接元素不是css引用，可能会检查href是否包含'css'

请注意，您也可以将href属性重新设置为指向不存在的页面，而不是完全删除该元素。

Answer 4

奇怪的是，IE和Firefox支持禁用属性，但不支持chrome，safari或opera。所以，这应该是最跨浏览器的。

// disables all styles in the document
function unload_stylesheet(DOMelement){
    DOMelement.disabled = true;
    DOMelement.parentNode.removeChild( DOMelement );
}
// usage
unload_stylesheet( document.getElementsByTagName('link')[0] );