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

我只能想到这个方法。

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

阿神 · Answer

用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两个方法可以查一下相关资料

phpcn_u1582 · Answer

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