將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設置爲一個變量本身，然後用該變量切換switchBodyColor（）函數中的document.body.className。

我想沿着線的東西：

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

你也可以用switch case塊代替if if語句。

Answer 4

您可以在顏色存儲在數組中，然後通過操作總是使用數組作爲當前顏色在第一色：

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]始終是當前顏色。