Die Einstellung Dokument.Körper.Klassenname als variable

Dies ist mein code zum schalten der Klasse von meinem body-tag, wenn ein Benutzer auf einen link klickt.

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

Ich möchte, um die daraus resultierende Farbe als eine variable mit dem Namen " bodyColor. Also, wenn der body-Klasse "blau" und der Benutzer klickt und schaltet diese auf "rot", die ich speichern möchten, und rot wie eine variable (bodyColor) für andere Anwendungen später auf. Oder noch besser, Dokument festlegen.Körper.Klassenname als variable sich selbst und wechseln Sie dann Dokumentes.Körper.className in der switchBodyColor() Funktion mit dieser variable.

Dachte ich, etwas entlang der Linien von:

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

oder

var bodyColor = document.body.className

um die body-Klasse als variable.

Natürlich keine der beiden Optionen arbeiten. ^_^; Wie kann ich erreichen, entweder (oder beide) der oben genannten?

InformationsquelleAutor Choy | 2010-01-24

  1. 10

    Müssen Sie die variable global sein:

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

    In deinem anderen Beispiel, müssen Sie auch setzen Sie Anführungszeichen um Ihren string Farbe:

     bodyColor = "red";

    Eine weitere Möglichkeit könnte sein, die Zahl Ihre Farbe von Klassen, die lassen Sie einfache arithmetische ändern Ihre Klassen und können Sie leicht ändern Sie die Anzahl der Klassen, die Sie Durchlaufen.

    var colorNum = 0;
var totalColors = 3;

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

    Du css wäre:

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

    Oder was auch immer Ihre Farbe Klassendefinitionen sind.

    danke, das beantwortet meine Frage in den meisten simple Art und Weise möglich, zusätzlich zu geben Sie mir eine alternative, die nicht viel schwieriger zu implementieren.

    InformationsquelleAutor Jeff B

  2. 5

    Sie speichern könnte die Farben in ein array, dann durch manipulation immer die erste Farbe im array die aktuelle Farbe:

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

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

    Und dann überall, wo Sie es brauchen, in Ihrer app, rufen Sie einfach an:

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

    Optionale Prüfung Anfangszustand

    Den vorherigen code wird davon ausgegangen, dass body element beginnt immer mit blue. Wenn das nicht der Fall, könnte man hinzufügen, diese one-time-code ausführen, der direkt unter der switchBodyColor() Funktion:

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

    Zusätzliche Erklärung

    Da Sie wollen, dass die Farben immer in der gleichen Reihenfolge, würde es Sinn machen, um ein Array zu verwenden, weil Ihre Bestellung wird immer geehrt. Jedoch da es keine "indexOf" in mindestens IE7 und unten, haben wir keine Möglichkeit der Zuordnung der aktuellen Farbe, um seine position im array ohne Schleife.

    Dies ist, wo die Array.shift und Array.push Befehle ins Spiel kommen. Array.shift entfernt die ersten element im array und gibt es zurück. Array.push nimmt, was an Sie übergeben wird, und "schiebt" es auf die Ende des Arrays. Durch die Kombination der beiden Methoden zusammen können wir das erste Element und verschieben Sie es bis zum Ende, wodurch eine Karussell-Art:

    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]

    So, die Bestellung ist immer anerkannt, und das erste element ist immer das, was wir wollen, so bodyColor[0] ist immer die aktuelle Farbe.

    wow, ich habe noch nie verwendet shift()
    Ich bin immer wieder erstaunt über die kleinen Funktionen, die ich nie kannte, die ändern, wie ich code. Die Array im JS hat shift, unshift, push, und pop. Denken Sie daran, dass push und unshift Gegenzug die neue Anzahl der Elemente im array, und dass pop und shift Gegenzug das entfernte Element.
    das macht Sinn für mich, aber es ist komplizierter als das, was ich Suche im moment. Ich versuche mehr Praxis gängige javascript-Funktionen zu lernen, aber das ist eine große variation der andere array-Antwort gegeben!
    Ich aktualisiert meine Antwort, damit Sie verstehen können, was Los ist besser. Ich verspreche Array.shift und Array.pop sind nicht verrückt, komisch, Funktionen 🙂
    Danke für die zusätzliche Erklärung, Doug. Können Sie kurz erläutern, was Konsole.log(c); ist?

    InformationsquelleAutor Doug Neiner

  3. 2

    Wenn Sie möchten, legen Sie eine Globale variable, dann müssen Sie deklarieren Sie Sie außerhalb der Funktion, so dass Ihre anderen Funktionen können darauf zugreifen. So, wie es sein würde,

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

    Können Sie ersetzen auch die if -, else if-Anweisung mit einer switch-case-block.

    InformationsquelleAutor rahul

  4. 2

    Ich würde eine Funktion schreiben und ein array für:

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

    Dies ist natürlich vorausgesetzt, dass die bodyColor und classNames Variablen in den globalen Gültigkeitsbereich.

    +1 für die Ablösung der "wenn" - Sequenz mit Objekt
    vielen Dank 🙂
    vielen Dank für eine weitere sehr gute alternative zu den, wie ich es Tat.

    InformationsquelleAutor Jacob Relkin

Schreibe einen Kommentar