Javascript 将document.body.className设置为变量

这是我的代码，用于在用户单击链接时切换我的body标记的类

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的变量。因此，如果body类为“blue”，用户单击并将其切换为“red”，我希望将red存储为变量（bodyColor），以供以后其他使用。或者更好的方法是，将document.body.className本身设置为变量，然后在switchBodyColor（）函数中使用该变量切换出document.body.className

我的想法大致如下：

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

或

将主体类设置为变量

---

当然，这两种选择都不起作用；我如何实现上述两项中的一项（或两项）？

我将为此编写一个函数和一个数组：

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

变量在全局范围内。

您需要全局变量：

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

你应该是：

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

---

或任何颜色类定义。

如果要设置全局变量，则必须在函数外部声明它，以便其他函数可以访问它。那就好像

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语句。

您可以将颜色存储在数组中，然后通过操纵始终使用数组中的第一种颜色作为当前颜色：

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

初始状态的可选检查

前面的代码假定您的

主体

元素始终以

蓝色

开头。如果不是这样，您可以在

switchBodyColor（）

函数的正下方添加此一次性运行代码：

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

---

因此，顺序总是被遵守的，第一个元素总是被设置为我们想要的，因此

bodyColor[0]

总是当前的颜色。

@Rakesh我总是对我不知道的小功能感到惊讶，这些功能改变了我的编码方式。JS中的

数组有
shift
、
unshift
、
push
和
pop
。请记住，
push
和
unshift
返回数组中新数量的项目，以及
pop
和
shift
返回删除的项目。这对我来说是有意义的，但比我目前正在寻找的更复杂。我正试图练习更多常见的javascript函数来学习，但这是给出的其他数组答案的一个巨大变化@乔治：我更新了我的答案，这样你就能更好地理解发生了什么。我保证
Array.shift
和
Array.pop
不是疯狂的奇怪函数：）谢谢你的额外解释，道格。你能澄清一下console.log（c）是什么吗；是吗？谢谢，这以最简单的方式回答了我的问题，并且给了我一个不太难实现的替代方案。谢谢你给了我另一个非常好的替代方案，来代替我是如何做到的。
for(var i=0; i<bodyColors.length; i++){
   if(document.body.className == bodyColors[i]) break;
   bodyColors.push(bodyColors.shift());
}

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]