如何反轉此JavaScript代碼？

我有一個網頁，其中有一個鏈接，用於更改頁面的背景顏色，鏈接的顏色，鏈接文本。&。這裏是我的代碼：如何反轉此JavaScript代碼？

<html> 

<head> 
<title>Title</title> 
<script type="text/javascript"> 
function Lights() { 
document.body.style.backgroundColor='#000000'; 
document.getElementById("on").innerHTML="Turn on the lights"; 
document.getElementById("on").style.color="#00ffff"; 
} 
</script> 
</head> 

<body style="font-size:200px; text-align:center;"> 
<a href="javascript:void(0)" id="on" onclick="Lights()">Turn off the lights</a> 
</body> 

</html>

我想知道我將如何設置JavaScript來扭轉這些報表時的鏈接再次點擊這樣的頁面是回白色背景，文字是回到「關閉燈「，&鏈接回到更深的藍色。

謝謝

來源

2013-05-20 Jacob Saunders

您可以使用一個變量來存儲狀態並切換基於關閉該。

<script type="text/javascript"> 
    var toggle = false; 
    function Lights() { 
    var link = document.getElementById("on"); 
    document.body.style.backgroundColor= toggle ? '#ffffff' : '#000000'; 
    link.innerHTML=toggle ? "Turn off the lights": "Turn on the lights"; 
    link.style.color= toggle ? '#000000': "#00ffff"; 
    toggle = !toggle; 
    } 
</script>

來源

2013-05-20 02:27:50

很好，它的工作。非常感謝！ –

沒問題。很高興這有幫助。所以，如果一個答案解決了你的問題，那麼表達謝意並向其他人表明解決問題的方法就是接受答案。這也可以幫助你建立代表，讓代表們可以在問題和答案中投票贊成並減少其他問題。 –

您可以切換基於一類值的設置：

<a ... class="lightsOn" onclick="Lights(this);" ...>Turn off the lights</a>

則：

function lights(element) { 
    if (element.className == 'lightsOn') { 
     element.className = 'lightsOff'; 
     // do settings for lights off 
    } else { 
     element.className = 'lightsOn'; 
     // do settings for lights on 
    } 
}

大部分設置都可以在CSS被分配到類，而不是硬編碼在函數中。

注意功能啓動以大寫字母的名字是，按照慣例，對構造保留，你不應該使用的一個元素，如果你不想要一個A，使用範圍與相應的造型：

<style type="text/css"> 
    .clickable { 
    cursor: pointer; 
    text-decoration: underline; 
    font-color: blue; 
    } 
</style> 

<span class="clickable" ...> ... </span>

來源

2013-05-20 02:45:38 RobG

如何反轉此JavaScript代碼？

回答

相關問題