Javascript 删除CSS规则！重要属性

为了“null”伪元素内容，我使用：

  var rule = document.styleSheets[0].insertRule('.video-js * .vjs-icon-placeholder:before {content: " "!important;}', 0);

仅当指定了“！important”属性时，我才工作。 在某些情况下，我需要恢复原始的伪元素内容。 我试过：

文档。样式表[0]。删除规则（规则）

；

---

那不行。有没有办法恢复原始内容？

它不起作用，因为当您删除规则时，它会从HTML中删除

内容

我认为最好的方法是先获取
内容
，然后重新分配

var prev=window.getComputedStyle(
document.querySelector（“…vjs图标占位符”），“：before”
).getPropertyValue（“内容”）
让prevContent=prev.substring（1，prev.length-1）//从开始和结束处删除引号。
var rule=document.styleSheets[0].insertRule（'.video js*.vjs图标占位符：在{content:！important；}之前，0）；

现在，无论您决定恢复到以前的内容

var rule=document.styleSheets[0].insertRule（'.video js*.vjs图标占位符：在{content:'+prevContent+'！important；}'，0之前）；
只需向元素添加另一个类，将内容设置为另一个值即可


document.querySelector（“按钮”）.addEventListener（“单击”），函数（e）{
document.querySelector（“.vjs图标占位符”）.classList.toggle（“nocontent”）；
});
.vjs图标占位符：之前{
内容：“这是一些前文”；
显示：块；
颜色：淡蓝色；
}
.vjs图标占位符。无内容：之前{
内容：“；
}

这是一个div。
切换内容
但是为什么不给元素添加一个特殊的类，并编写一个应用于这个类的CSS规则呢？然后你只需要切换类。这是如何做到的，而不是通过使用JS在现有CSS中编写代码。问题是，有许多（~10）个不同的元素。它们每个都有独特的内容（这就是为什么-.video js*）。可能是循环？@Serg只需在CSS:
.video-js.nocontent*.vjs图标占位符：{content:}
之前写下这个。然后只需使用class
video js
@Serg在所有元素上切换
nocontent
类。如果所有video js元素都有一个共同的祖先（您可以将主体用于此目的），则可以只在该祖先上切换nocontent类，即
祖先.nocontent.video js*.vjs图标占位符：在{content:}之前
和
document.querySelector（“#祖先”）.classList.toggle（“nocontent”）
.document.styleSheets[0]。insertRule（'.video-js.nocontent*：在{content:！important；}'，0之前）和后面的文档。querySelector（“.video js*”）。classList.toggle（“nocontent”）-不使用insertRule。正如我上面所展示的那样编辑你的CSS。这就是问题所在——它不会从HTML中删除它。检查器仍然显示内容：“”！重要的；哦！因此，您可以创建一个选择器，然后使用JS更改CSS。