javascript – So implementieren Sie JS, um globale CSS-Stile dynamisch zu ändern

Question

Wenn Sie den globalen CSS-Stil auf der Seite dynamisch ändern möchten, ändern Sie beispielsweise die Farbe aller Schriftarten auf der Seite in Rot.
Dies kann über CSS erreicht werden.

*{color:red;}

Und wenn Sie die Schaltflächen auf der Seite verwenden, um die Stile aller Elemente über js zu ändern, klicken Sie also auf die Schaltfläche über js, um die Stile aller Elemente auf der Seite dynamisch zu ändern, sodass die Schriftfarbe rot ist. Wie sollte das sein? umgesetzt werden

Answer 1

我只能想到这个方法。

Array.prototype.slice.call(document.all).forEach(function (ele) {
    ele.style.color = 'red';
});

Answer 2

用css样式相关的接口 stylesheet.insertRule或者stylesheet.addRule 这两个都可以动态插入css样式 兼容性还可以 ie9+

比如

    // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
    myStyle.insertRule("#blanc { color: white }", 0);

需要删除的时候还有deleteRule和removeRule两个方法 可以查一下相关资料

Answer 3

[].forEach.call(document.querySelectorAll('*'),function(a){
a.style.color = 'red';
})