jQuery从样式部分删除CSS类

Question

我的风格部分有很多课程。 如何使用jquery / javascript从样式部分中删除类？ 例如：

<style id="myStyle"> 
.myClass { color: red);
.myClassSecond { color: black};
</style>

$('.myButton').click(function(){
//delete .myClass from style section
});

Answer 1

下面的示例将从给定的任何元素中删除一个类。 您不会从样式部分中删除css类，而只是将其从您不想对其应用类的元素中删除。

$(".myButton").click(function(){
    //Replace "elementUsingTheClass" with your element that has the class set
    $("elementUsingTheClass").removeClass("myClass");
});

Answer 2

尽管我认为最好从页面中的元素中删除类，但是如果您确实想从内存中的样式表中删除类，则可以通过以下方法完成（在Chrome中进行测试）。

 $('.myButton').click(function(){ //delete .myClass from style section var stylesheets = document.styleSheets; for (var sheet in stylesheets) { var rules = stylesheets[sheet].cssRules; var found = false; for (var rule in rules) { if (rules[rule].selectorText == ".myClass") { found = true; console.log("found"); console.log("deleting rule"); stylesheets[sheet].deleteRule(rules[rule]); } } // verify if (found) { found = false; for (var rule in rules) { if (rules[rule].selectorText == ".myClass") { found = true; console.log("found again :("); } } } console.log(found); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style id="myStyle"> .myClass { color: black;background-color:red;); .myClassSecond { color: black}; </style> <button class="myClass myButton">Click Me</button> 

Answer 3

您可以通过阅读样式文字将其删除，例如

var styleContent = document.getElementById("myStyle").innerText;

然后获取行，如下所示：

var sourceRows = styleContent.split("\n");

然后复制要保留的行：

var destinationRows = [];
for (var index in sourceRows) {
    if (sourceRows[index].indexOf(".myClass") < 0)
        destinationRows.push(sourceRows[index]);
} 

然后将其还原为您的样式：

document.getElementById("myStyle").innerText = destinationRows.join("\n");

但要注意潜在的问题：

• 您可能需要在此样式标签之外删除样式
• 您可能有跨多个行的规则，在这种情况下，此解决方案本身将无法正常工作，但这将是一个不错的起点