javascript - Bagaimana untuk melaksanakan JS untuk mengubah suai gaya global css secara dinamik

Question

Jika anda ingin mengubah suai gaya global css dalam halaman secara dinamik, contohnya, tukar warna semua fon pada halaman kepada merah
Ini boleh dicapai melalui css

*{color:red;}

Dan jika anda menggunakan butang pada halaman untuk mengubah suai gaya semua elemen melalui js, iaitu, klik butang melalui js untuk mengubah suai gaya semua elemen pada halaman secara dinamik supaya warna fon berwarna merah, bagaimanakah dilaksanakan

Answer 1

Saya hanya boleh memikirkan kaedah ini.

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

Answer 2

Gunakan antara muka yang berkaitan dengan gaya css stylesheet.insertRule atau stylesheet.addRule, yang kedua-duanya boleh memasukkan gaya css secara dinamik Keserasian adalah baik dengan ie9+ 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

Sebagai contoh🎜 rrreee 🎜Apabila anda perlu memadam, terdapat dua kaedah: deleteRule dan removeRule Anda boleh menyemak maklumat yang berkaitan🎜

Answer 3

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