Comment modifier/supprimer des classes CSS définitions au moment de l'exécution?

Question

Je sais qu'il est possible d'ajouter de nouvelles classes CSS définitions au moment de l'exécution à l'aide de JavaScript. Mais...

Comment modifier/supprimer des classes CSS définitions au moment de l'exécution?

Par exemple, part du principe qu'il a, j'ai la classe ci-dessous:

<style>
.menu { font-size: 12px; }
</style>

Est ce que je veux, au moment de l'exécution, changer la de la font-size de la règle de l' .menu classe, de sorte que chaque élément de la page qui utilise cette classe sera affectée.

Et, je veux aussi savoir comment faire pour supprimer l' .menu définition de la classe.

Answer 1

Il n'est pas difficile de modifier les règles CSS à l'exécution, mais apparemment il est difficile de trouver la règle que vous souhaitez. PPK a un tour rapide de ce sur quirksmode.org.

Vous aurez envie d'utiliser document.styleSheets[i].cssRules qui est un tableau, vous devez analyser pour trouver celui que vous voulez, et ensuite, rule.style.setProperty('font-size','10px',null);

Answer 2

J'ai trouvé une réponse à http://twelvestone.com/forum_thread/view/31411 et je suis de reproduction d'éléments du thread ici, mot à mot, parce que j'ai peur que le fil, et le très utile de répondre, va s'évaporer.

Flip 2006.06.26, 02:45 - [ Croquant De La Grenouille ] messages: 2470 date d'inscription: 2003.01.26

Eh bien, après environ 10 à 12 heures de recherche, la lecture et le bricolage, je l'ai fait! Je suis CSS/JS code Ninja aujourd'hui!

Le code JS est utilisé comme suit:

<script language="JavaScript">
function changeRule(theNumber) {
    var theRules = new Array();
    if (document.styleSheets[0].cssRules) {
        theRules = document.styleSheets[0].cssRules;
    } else if (document.styleSheets[0].rules) {
        theRules = document.styleSheets[0].rules;
    }
    theRules[theNumber].style.backgroundColor = '#FF0000';
}
</script>

J'ai testé sur FF(Mac), Safari(Mac), O9(Mac), IE5(Mac), IE6(PC), FF(PC) et qu'ils travaillent tous. La raison de la déclaration " if " est certains navigateurs utilisent cssRules... certains utilisent simplement les règles... Et la seule autre les cheveux, c'est que vous ne pouvez pas utiliser "background-color" pour désigner le modèle, vous devez vous débarrasser du trait d'union et de mettre en majuscule la première lettre après le trait d'union.

Pour faire référence à la première règle de CSS que vous souhaitez utiliser "changeRule(0)", le second "changeRule(1)" et le troisième "changeRule(2)" et ainsi de suite...

Je n'ai pas trouvé un navigateur qu'il ne fonctionne pas.... encore.... Tout ce que vous direz pourra et sera utilisé contre vous. Plus de et plus et plus.

---

BillyBones 2011.01.20, 11:57 - [ dans le canon ] messages: 1 date d'inscription: 2011.01.20

Bonjour, je me suis inscrit dans ces forums juste pour ajouter ce petit bout que je ne pouvais pas facilement trouver ailleurs:

function changeStyle(selectorText)
{
    var theRules = new Array();
    if (document.styleSheets[0].cssRules) {
        theRules = document.styleSheets[0].cssRules;
    } 
    else if (document.styleSheets[0].rules) {
        theRules = document.styleSheets[0].rules;
    }
    for (n in theRules)
    {
        if (theRules[n].selectorText == selectorText)   {
            theRules[n].style.color = 'blue';
        }
    }
}

Cela fait tout simplement la règle CSS identifiable par son sélecteur de nom plutôt que par son numéro d'index dans la cssRules tableau.

En d'autres termes, vous pouvez exécuter la fonction Javascript avec l'argument de chaîne "selectorText" au lieu d'un nombre qui est difficile à retenir et sujette à de fréquentes modifications si de nouveaux styles sont ajoutés.

Je vous remercie pour votre 10 à 12 heures de recherche, Flip, j'espère que j'ai fait un plus digne.

Answer 3

je pense que vous êtes à la recherche pour les ce:

http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

cela vous permet de changer les règles avec javascript. ive utilisé une fois, il y a quelques années, il semblait avoir fonctionné.