Установка document.body.className в качестве переменной

Question

Это мой код для переключения класса тега моего тела, когда пользователь нажимает на ссылку.

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. Так что, если класс тела «синий», а пользователь щелкает и переключает его на «красный», я хочу сохранить красный как переменную (bodyColor) для других целей позже. Или еще лучше: установите document.body.className в качестве самой переменной, а затем отключите document.body.className в функции switchBodyColor () с этой переменной.

Я думал что-то вроде:

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

или

var bodyColor = document.body.className

для установки класса тела в качестве переменной.

Конечно, ни один из этих двух вариантов не работает. ^ _ ^; Как я могу выполнить одно (или оба) из вышеперечисленного?

Answer 1

Ваша переменная должна быть глобальной:

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

В другом примере вам также нужно поместить кавычки вокруг вашей цветной строки:

 bodyColor = "red";

Другим способом сделать это может быть нумерация ваших цветовых классов, что позволит вам использовать простую арифметику для изменения ваших классов и позволит вам легко изменять количество классов, через которые вы проходите.

var colorNum = 0;
var totalColors = 3;

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

Вы бы css были:

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

Или какими бы ни были ваши определения цветовых классов.

Answer 2

Вы можете сохранить цвета в массиве, тогда при манипуляциях всегда используйте первый цвет в массиве в качестве текущего цвета:

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

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

И тогда, когда вам это нужно в вашем приложении, просто позвоните:

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

Дополнительная проверка для начального состояния

В предыдущем коде предполагается, что ваш элемент body всегда начинается с blue. Если это не так, вы можете добавить этот одноразовый код запуска прямо под функцией switchBodyColor():

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

Дополнительное объяснение

Так как вы хотите, чтобы цвета всегда вращались в одном и том же порядке, имеет смысл использовать массив, потому что его порядок всегда соблюдается. Однако , поскольку по крайней мере в IE7 и ниже нет "indexOf", у нас нет способа сопоставить текущий цвет с его положением в массиве без цикла.

Здесь вступают в игру команды Array.shift и Array.push. Array.shift удаляет первый элемент в массиве и возвращает его. Array.push берет то, что ему передано, и "выталкивает" его на end массива. Объединив два метода вместе, мы можем взять первый элемент и переместить его в конец, создавая карусель вроде:

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]

Таким образом, порядок всегда соблюдается, и первый элемент всегда устанавливается в соответствии с тем, что мы хотим, поэтому bodyColor[0] всегда является текущим цветом.

Answer 3

Если вы хотите установить глобальную переменную, вам придется объявить ее вне функции, чтобы другие функции могли получить к ней доступ. Так было бы как

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

Вы также можете заменить оператор if else if блоком регистра переключателя.

Answer 4

Я бы написал для этого функцию и массив:

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

Это, конечно, предполагает, что переменные bodyColor и classNames находятся в глобальной области видимости.