Удалить правило CSS со свойством! Important

Question

Чтобы обнулить содержимое псевдоэлементов, я использую:

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

Я работаю, только если указано свойство «! Important». В некоторых случаях мне нужно восстановить исходное содержимое псевдоэлементов. Я пробовал: document.styleSheets[0].deleteRule(rule); Это не работает. Есть ли способ восстановить исходный контент?

Answer 1

Просто добавьте еще один класс к элементу, который устанавливает для содержимого другое значение.

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 вместо этого только на этом предке, т.е. #ancestor.nocontent .video-js * .vjs-icon-placeholder:before{content: " "} и document.querySelector("#ancestor").classList.toggle("nocontent").

Answer 2

Это не работает, потому что, когда вы удаляете правило, оно удаляет content из HTML,

Я считаю, что лучшим методом было бы сначала получить 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);