Réglage de document.corps.className comme une variable

C'est mon code pour changer la classe de ma balise body lorsqu'un utilisateur clique sur un lien.

function switchBodyColor() {
    if (document.body.className == 'blue')
        document.body.className = 'red';
    else if (document.body.className == 'red')
        document.body.className = 'green';
    else if (document.body.className == 'green')
        document.body.className = 'blue';
}

Je veux mettre de la couleur résultante comme une variable appelée corps. Donc, si le corps de la classe est "bleu" et que l'utilisateur clique et il passe pour le "rouge" je veux le ranger rouge comme une variable (corps) pour d'autres usages plus tard. Ou mieux encore, l'ensemble du document.corps.className comme une variable elle-même, et puis de passer en page du document.corps.className dans le switchBodyColor() fonction avec cette variable.

J'ai pensé que quelque chose le long des lignes de:

    if (document.body.className == 'blue')
        document.body.className = 'red',
        var bodyColor = red;

ou

var bodyColor = document.body.className

pour définir le corps de la classe comme une variable.

Bien sûr, aucune de ces deux options de travail. ^_^; Comment puis-je accomplir un ou l'autre (ou les deux) de la ci-dessus?

OriginalL'auteur Choy | 2010-01-24

  1. 10

    Vous avez besoin de votre variable globale:

    var bodyColor = 'red';  //Global var, initialized to your first color class

function switchBodyColor() {
    if (document.body.className == 'blue')
        document.body.className = 'red';
    else if (document.body.className == 'red')
        document.body.className = 'green';
    else if (document.body.className == 'green')
        document.body.className = 'blue';


    bodyColor = document.body.className;
    alert(bodyColor);
}

    Dans votre autre exemple, vous avez également besoin de mettre des guillemets autour de votre chaîne de couleur:

     bodyColor = "red";

    Une autre façon de faire pourrait être de nombre de vos classes de couleurs, ce qui vous permettra d'utiliser l'arithmétique simple de modifier vos classes et vous permet de modifier facilement le nombre de classes que vous êtes à vélo à travers.

    var colorNum = 0;
var totalColors = 3;

function switchBodyColor() {
    colorNum = (colorNum+1)%totalColors;
    document.body.className = 'color'+colorNum;
}

    Vous css serait:

    .color0 { background-color: blue; }
.color1 { background-color: red; }
.color2 { background-color: green; }

    Ou quel que soit votre couleur de définitions de classe.

    merci, cela répond à ma question dans la plus simpliste possible en plus de me donner une alternative pas beaucoup plus difficile à mettre en œuvre.

    OriginalL'auteur Jeff B

  2. 5

    Vous pouvez stocker les couleurs dans un tableau, puis par la manipulation de toujours utiliser la première couleur dans le tableau que la couleur actuelle:

    var bodyColors = ['blue','red','green'];

function switchBodyColor(){
   bodyColors.push(bodyColors.shift()); //Move first item to the end
   document.body.className = bodyColors[0];
}

    Et puis partout où vous en avez besoin dans votre application, il suffit d'appeler:

    bodyColors[0]; //Will refer to the current body class

    Contrôle facultatif pour l'État Initial

    Le code précédent suppose que votre body élément commence toujours avec blue. Si ce n'est pas le cas, vous pourriez ajouter ce un temps d'exécuter le code juste en dessous de la switchBodyColor() fonction:

    for(var i=0; i<bodyColors.length; i++){
   if(document.body.className == bodyColors[i]) break;
   bodyColors.push(bodyColors.shift());
}

    Explication Complémentaire

    Puisque vous voulez que les couleurs tournent toujours dans le même ordre, il serait logique d'utiliser un Tableau, car l'ordre est toujours à l'honneur. Cependant puisqu'il n'y a pas de "indexOf" dans au moins IE7 et ci-dessous, nous n'avons aucun moyen de correspondance de la couleur de sa position dans le tableau sans boucle.

    C'est là que le Array.shift et Array.push commandes entrent en jeu. Array.shift supprime la première élément dans le tableau, et le renvoie. Array.push prend ce qui est passé, et "pousse" sur le fin de la matrice. En combinant les deux méthodes ensemble, nous pouvons prendre le premier élément et le déplacer à la fin, la création d'un carrousel de toutes sortes:

    var c = [1,2,3];
c.push(c.shift());
console.log(c); //Outputs [2,3,1]
c.push(c.shift());
console.log(c); //Outputs [3,1,2]
c.push(c.shift());
console.log(c); //Outputs [1,2,3]

    Ainsi, la commande est toujours honorée et le premier élément est toujours ce que nous voulons, donc bodyColor[0] est toujours la couleur actuelle.

    wow, je n'ai jamais utilisé shift()
    Je suis toujours étonné par le peu de fonctions, je ne savais à propos de ce changement comment je code. Le Array en JS a shift, unshift, push, et pop. Rappelez-vous juste que push et unshift retour le nouveau nombre d'éléments dans le tableau, et que l' pop et shift retour de l'élément supprimé.
    cela fait sens pour moi, mais c'est plus compliqué que ce que je suis à la recherche pour le moment. Je suis en train de pratique plus fréquente des fonctions javascript à apprendre, mais c'est une grande variation de l'autre de la matrice de réponse!
    J'ai mis à jour ma réponse afin que vous puissiez comprendre ce qui se passe mieux. Je promets Array.shift et Array.pop ne sont pas fou bizarre fonctions 🙂
    Merci pour l'explication complémentaire Doug. Pouvez-vous clarifier ce que la console.journal(c); est?

    OriginalL'auteur Doug Neiner

  3. 2

    Si vous souhaitez définir une variable globale, alors vous devrez la déclarer en dehors de la fonction, de sorte que vos autres fonctions peuvent y accéder. Donc, il serait comme

    var bodyColor;

function switchBodyColor() {
    if (document.body.className == 'blue')
    {
        document.body.className = 'red';
    }
    else if (document.body.className == 'red')
    {
        document.body.className = 'green';
    }
    else if (document.body.className == 'green')
    {
        document.body.className = 'blue';
    } 

    bodyColor = document.body.className;
}

    Vous pouvez également remplacer le if else if avec un commutateur cas de bloc.

    OriginalL'auteur rahul

  4. 2

    Je voudrais écrire une fonction et un tableau pour cette:

    var classNames = { 'blue': 'red', 'red': 'green', 'green': 'blue' };

function setBodyClass( className ) {
   document.body.className = className;
   bodyColor = className;
}

function switchBodyColor() {
   var newClass = classNames[ document.body.className ];
   if( newClass.length ) { //body.className is in the array.
       setBodyClass( newClass );
   }
}

    C'est bien sûr en supposant que le bodyColor et classNames variables sont dans la portée globale.

    +1 pour le remplacement de "si" de la séquence avec l'objet
    merci 🙂
    merci pour une autre très bonne alternative à la façon dont je le faisais.

    OriginalL'auteur Jacob Relkin