javascript - 如何将 "null"伪:before element by Javascript的内容值

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');
});