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

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

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

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

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

【问题讨论】：

【解决方案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()

【讨论】：

【解决方案3】：

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

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

【讨论】：