將document.body.className設置為變量

Question

這是我的代碼，用於在用戶單擊鏈接時切換我的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類是“藍色”並且用戶單擊並將其切換為“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;
}

你將是：

.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接受傳遞給它的內容，並將其“推”到數組的末尾 。 通過將兩種方法結合在一起，我們可以獲取第一項並將其移至最后，創建一個類型的輪播：

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塊替換if else if語句。