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

我想到了以下几点：

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

或

var bodyColor = document.body.className

将body类设置为变量。

当然，这两个选项都不起作用。 ^ _ ^;我怎样才能完成上述任何一项（或两项）？

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删除数组中的 first 元素，并返回它。 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 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变量属于全局范围。

Answer 4

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

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

您还可以使用switch case block替换if else if语句。

将document.body.className设置为变量

4 个答案: