刪除帶有 !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") 。