用 jQuery 删除 <link> 元素？

Posted 2023-05-09

技术标签:

【中文标题】用 jQuery 删除 <link> 元素？【英文标题】：Removing <link> element with jQuery? 【发布时间】：2010-11-01 04:00:26 【问题描述】：

我不想使用 style.css 中的样式，所以我决定从 DOM 中删除 style.css。这在 Firefox 和 IE8 中运行良好，但在 IE6 中不行：

$("LINK[href='http://www.example.com/style.css']").remove();

任何其他解决方案，使用 jQuery？

这里是示例： html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() 
    $("link[href*='style.css']").remove();         
);
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">...</div>
</body>
</html>

这里是 CSS (style.css)：

#content 
    background-color:#333;

仅在 IE 中 #content 仍然是黑暗的。 :( 也许是 jQuery 的错误？

【问题讨论】：

【参考方案1】：

这不是 jQuery 的错误，它是 IE 渲染引擎的错误（或者可能是一个特性）。

此问题似乎是由于 Internet Explorer 在从 DOM 中删除 LINK 元素后未正确重新呈现页面所致。

在这种特殊情况下，DOM 中不再存在 LINK 标记，但 IE 仍显示已加载到内存中的 CSS。

解决方法/解决方案是使用 .disabled 属性禁用样式表，如下所示：

// following code will disable the first stylesheet
// the actual DOM-reference to the element will not be removed; 
// this is particularly useful since this allows you to enable it
// again at a later stage if you'd want to.
document.styleSheets[0].disabled = true;

编辑回复您的评论：

或者，如果您想通过 href 删除它，请使用以下代码：

var styleSheets = document.styleSheets;
var href = 'http://yoursite.com/foo/bar/baz.css';
for (var i = 0; i < styleSheets.length; i++) 
    if (styleSheets[i].href == href) 
        styleSheets[i].disabled = true;
        break;

【讨论】：

感谢您的回答，但这不是我想要的。我不知道元素索引，因为它是可变的。关于这个元素，我唯一知道的是 href 值。我刚刚添加了一个额外的例子，如果你只有 href 应该可以解决这个问题它在FF中不起作用，但我添加了 $("link[href*='style.css']").remove();在 for 声明之后，现在一切正常。谢谢:) 感谢您跟进该 sasa，在 Chrome 中的工作就像一个魅力。还没有跨浏览器测试！【参考方案2】：

也许这是 IE6 对href 属性中的 URL 所做的一些奇怪的事情？尝试类似：