使用 JQuery 从 head 标签中动态删除样式

Posted 2023-02-22

技术标签:

【中文标题】使用 JQuery 从 head 标签中动态删除样式【英文标题】：Dynamically delete a style from head tag with JQuery 【发布时间】：2014-12-05 07:37:07 【问题描述】：

我正在动态创建如下样式并将其附加到<head>

 $("<style type='text/css'> .HP  background-color: "Red " </style>").appendTo("head");

在页面上我想删除一个特定的 css 类并重新添加不同的值。如何在 JQuery 中做到这一点。

【问题讨论】：

你要modify the stylesheet directly吗？只有一条规则，还是整个样式元素？（我注意到 example 只有一个类规则，但是...）旁注：颜色名称不加引号，也不大写：background-color: red 只是动态添加一个规则到 【参考方案1】：

您可以为样式属性添加 ID

 $("<style id='myStyle' type='text/css'> .HP  background-color: \"Red \" </style>").appendTo("head");

然后你可以简单地使用 ID 选择器和.remove() like

$('#myStyle').remove()

【讨论】：

我刚刚尝试使用 .remove() 但没有任何反应，它仍然存在，所以我使用了 $("#myStyle").html("");在 .remove() 之后，现在我可以看到变化【参考方案2】：

您可以使用css()，无需更改您的主样式表，

$('.HP').css('color','red !important');

以上内容将使所有具有HP Class的元素的字体颜色为red

$('.HP').css('background-color','green !important');// change your bgcolor red to green

要删除最后添加的style，试试这个，

$('head style:last').remove();

此外，如果您要动态添加多个样式，则要删除特定样式，请为样式标记提供 id 和 remove() 之类的，

$('#STYLE-ID-TO-BE-Removed').remove()

【讨论】：

这添加了一个内联样式，想象一下如果你动态添加元素，每次添加至少一个元素时，你都需要再次调用 css()。在那种情况下似乎效率不高【参考方案3】：

将 ID 添加到您要删除的样式。然后在 JQuery 中使用

$("#styleId").remove();

【讨论】：

以上是关于使用 JQuery 从 head 标签中动态删除样式的主要内容，如果未能解决你的问题，请参考以下文章