如何通过Javascript将null的伪：before元素的内容值“清空”

Question

我有一系列具有不同类的按钮，这些按钮由具有不同预定义“内容”值的“：before”伪元素组成。 有没有一种方法可以使用javascript（而不是jquery）“清空”所有按钮的内容值？

.button 1:before{content:"xxx";} .button 2:before{content:"yyy";} .button 3:before{content:"zzz";}...etc.

到

.button 1:before{content:" ";} .button 2:before{content:" ";} .button 3:before{content:" ";}...etc.

Answer 1

要清除CSS内容属性，您需要向要清除该属性的元素添加特定的类。

Css：

.clear-content {
   content: none; //you can add !important to make sure you will override other styles
}

Javascript：

document.querySelector(".button_1").classList.add('clear-content');

您还可以浏览所有项目，例如按钮：

document.querySelectorAll("button").forEach((item) => {
    item.classList.add('clear-content');
});

Answer 2

这是单线技巧：

insertRule-受所有现代浏览器支持：Codepen

document.styleSheets[0].insertRule('.button:after, .button:before {content: " ";}',0);

addRule-除FF外的所有现代浏览器均支持

document.styleSheets[0].addRule('.button:after, .button:before','content: " ";');