删除带有 !important 属性的 CSS 规则

Question

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

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

我仅在指定“.important”属性时才工作。 在某些情况下，我需要恢复原始伪元素内容：我尝试过： document.styleSheets[0].deleteRule(rule) ； 那是行不通的。 有没有办法恢复原始内容？

Answer 1

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

我相信最好的方法是先获取content然后重新分配。

var prev = window.getComputedStyle(
    document.querySelector('..vjs-icon-placeholder'), ':before'
).getPropertyValue('content')

let prevContent = prev.substring(1,prev.length-1) //to remove the quotes from start and end.

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

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

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

Answer 2

只需将另一个 class 添加到将内容设置为另一个值的元素。

 document.querySelector("button").addEventListener("click", function(e){ document.querySelector(".vjs-icon-placeholder").classList.toggle("nocontent"); });

 .vjs-icon-placeholder:before{ content: "This is some before text"; display: block; color: dodgerblue; }.vjs-icon-placeholder.nocontent:before { content: " "; }

 <div class="vjs-icon-placeholder"> This is a div. </div> <button> Toggle Content </button>

如果所有 video-js 元素都有一个共同的祖先（您可以为此目的使用正文），则可以在该祖先上切换 nocontent class，即#ancestor.nocontent.video-js *.vjs-icon-placeholder:before{content: " "}和document.querySelector("#ancestor").classList.toggle("nocontent") 。