使用JavaScript / jQuery删除或replace样式表（<link>）

我该怎么做？

我试过了

$('link[title="mystyle"]').remove(); 

虽然元素被移除，但样式仍然应用于当前页面（在Opera和Firefox中）。

有没有其他的方法？

Answer 1

为了迎合你不得不把样式表设置为禁用，因为它保留在内存中的CSS样式，所以删除元素将无法正常工作，如果我没有记错，它也可能导致它在某些情况下崩溃。

这也适用于跨浏览器。

例如

 document.styleSheets[0].disabled = true; 

/ /所以在你的情况下使用jQuery的尝试

 $('link[title=mystyle]')[0].disabled=true; 

Answer 2

我设法做到这一点：

 $('link[title="mystyle"]').attr('disabled', 'disabled'); 

看来这是从内存中删除样式的唯一方法。 然后我补充说：

 $('link[title="mystyle"]').remove(); 

也删除元素。

Answer 3

要禁用您select的样式表：

 $('link[title="mystyle"]').prop('disabled', true); 

如果你不希望再次应用样式表，那么你可以.remove()它。 但是，如果您希望稍后能够重新启用它，请不要这样做。

要重新启用样式表，请执行此操作（只要您不remove样式表的元素）：

 $('link[title="mystyle"]').prop('disabled', false); 

在上面的代码中，使用.prop而不是.attr是很重要的。 如果您使用.attr ，则代码将在某些浏览器中运行，但不会在Firefox中运行。 这是因为根据MDN ， disabled是HTMLLinkElement DOM对象的属性，但不是 link HTML元素的属性。 将disabled作为HTML属性是非标准的。

Answer 4

没有jQuery的解决scheme

如果你可以添加id到你的链接标签

 <link rel="stylesheet" href="css/animations.css" id="styles-animations"> document.getElementById("styles-animations").disabled = true; 

如果你知道你的css文件在文件中的索引位置

 document.styleSheets[0].disabled = true; // first document.styleSheets[document.styleSheets.length - 1].disabled = true; // last 

如果您想通过名称禁用样式，则可以使用此function

 /** * @param [string] [styleName] [filename with suffix eg "style.css"] * @param [boolean] [disabled] [true disables style] */ var disableStyle = function(styleName, disabled) { var styles = document.styleSheets; var href = ""; for (var i = 0; i < styles.length; i++) { href = styles[i].href.split("/"); href = href[href.length - 1]; if (href === styleName) { styles[i].disabled = disabled; break; } } }; 

注意：确保样式文件名是唯一的，所以你没有“dir1 / style.css”和“dir2 / style.css”。 在这种情况下，它只会禁用第一种风格。

Answer 5

删除样式表：

 $('link[src="<path>"]').remove(); 

replace样式表：

 $('link[src="<path>"]').attr('src','<NEW_FILE_PATH>'); 

Answer 6

使用纯javascript：

 var stylesheet = document.getElementById('stylesheetID'); stylesheet.parentNode.removeChild(stylesheet);