删除 CSS 文件答案

【问题标题】：Removing the CSS file删除 CSS 文件
【发布时间】：2012-10-03 04:34:11
【问题描述】：

我正在使用带有 jsp 页面的 spring MVC 进行演示，我在一个 jsp 页面中有三个选项卡假设 A,B 和 C。在单击 A 选项卡时，会显示 css 文件（例如 aa.css）已加载到带有相应 div 的 head 标记中，并且单击 B 和 C 的方式相同。主要问题是一次 Three 。 CSS 文件正在加载，它会相互覆盖。我还想从 head 中删除 css 文件，该文件已在使用 jquery 点击上述任何选项卡时加载，如下所示。

  $("#A").click(function(){
     alert("Remove bb and cc.css file form head tag");
  });

任何想法都会对我有很大帮助。

谢谢。

【问题讨论】：

为什么需要这个，因为在加载文档后删除 CSS 文件标签是没有用的
没有点击任何标签相应的css文件将再次加载。问题是这 3 个 css 文件有一些公共类，因此其他 css 会受到影响。

标签： jquery css jsp spring-mvc

【解决方案1】：

我不得不在无法指定 id 的情况下禁用 css 文件，因此要删除以下 css 文件：

<link rel="stylesheet" type="text/css" href="http://localhost:8092/bootstrap/css/bootstrap.min.css" disabled="disabled">

我添加了这个脚本

<script type="text/javascript">
  $(document).ready(function() {
    $('link[href*="bootstrap.min.css"]').attr("disabled", "true");
  }
</script>

【讨论】：

【解决方案2】：

你只需给那个链接标签一个 id 或一个类（比如 id="deleteMe"）然后像下面这样删除它：

$('head').find('link#deleteMe').remove();

所以在你的情况下，当你像这样链接它们时，为每个文件添加 id：

<link id="aa" rel="stylesheet" href="First.css" type="text/css" />  
<link id="bb" rel="stylesheet" href="Second.css" type="text/css" />  
<link id="bb" rel="stylesheet" href="Third.css" type="text/css" />

现在要删除 Second.css，Third.css 你必须像这样编写你的 jQuery：

(function ($) {  
    $('head').find('link#aa').remove();  
    $('head').find('link#bb').remove();  
})(jQuery);

【讨论】：

【解决方案3】：

您可以通过禁用 css 来卸载它，如下所示：

$("#A").click(function(){
    $("link[href*=bb.css]").attr("disabled", "disabled");
    $("link[href*=cc.css]").attr("disabled", "disabled");
    $("link[href*=aa.css]").removeAttr("disabled");
});

【讨论】：

对该 css 使用 removeAttr('disabled')
语法错误，无法识别的表达式：[href=./css/manage_deals.css] 我使用的是 $("link[href=./css/manage_deals.css]").attr("禁用");
感谢@MdToufiqulIslam - 受您的回答启发我做了this

【解决方案4】：

给<link>标签一个id。

<link rel="stylesheet" href="style1.css" id="style1" />
<link rel="stylesheet" href="style2.css" id="style2" />

并使用此代码：

$("#A").click(function(){
    $("#style1").attr("disabled", "disabled");
});

注意：虽然 HTML 标准中没有 disabled 属性，但 HTMLLinkElement DOM 对象上有 disabled 属性。

将 disabled 用作 HTML 属性是非标准的，仅由某些 Microsoft 浏览器使用。不要使用它。要达到类似的效果，请使用以下技术之一：

如果已将disabled 属性直接添加到页面上的元素，则不要包含<link> 元素；
通过脚本设置 DOM 对象的disabled 属性。

【讨论】：