javascript - Comment implémenter JS pour modifier dynamiquement les styles globaux CSS

Question

Si vous souhaitez modifier dynamiquement le style global CSS de la page, par exemple, changez la couleur de toutes les polices de la page en rouge
Cela peut être réalisé via CSS

*{color:red;}

Et si vous utilisez les boutons de la page pour modifier les styles de tous les éléments via js, c'est-à-dire cliquez sur le bouton pour modifier dynamiquement les styles de tous les éléments de la page en rouge via js, comment l'implémenter

Answer 1

Je ne peux penser qu'à cette méthode.

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

Answer 2

Utilisez l'interface liée au style CSS stylesheet.insertRule ou stylesheet.addRule, qui peuvent toutes deux insérer dynamiquement des styles CSS. La compatibilité est bonne avec 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.

Par exemple🎜 rrreee 🎜Lorsque vous devez supprimer, il existe deux méthodes : deleteRule et removeRule. Vous pouvez vérifier les informations pertinentes🎜.

Answer 3

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