javascript - 如何實作JS動態修改css全域樣式

Question

如果要在頁面中動態修改css全域樣式，例如將頁面所有字體顏色改為紅色
透過css可以這樣實作

*{color:red;}

而如果透過js，利用頁面中的按鈕修改所有元素樣式，即透過js點擊按鈕動態修改頁面中所有元素樣式字體顏色為紅色，應如何實現

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