如何反轉此JavaScript代碼？

Question

我有一個網頁，該網頁的鏈接設置為更改頁面的背景顏色，鏈接的顏色和鏈接文本。 這是我的代碼：

<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以再次單擊鏈接時使這些語句反向，從而使頁面回到白色背景，文本回到“關閉燈”，並且鏈接回到深藍色。。

謝謝

Answer 1

您可以使用變量來存儲狀態並基於該狀態進行切換。

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

Answer 2

您可以根據類值切換設置：

<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元素，則不應該使用A元素，而應使用具有適當樣式的span：

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

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

如何反轉此JavaScript代碼？

問題描述

2 個解決方案

解決方案1
3 2013-05-20 02:27:50

解決方案2
0 2013-05-20 02:45:38

如何反轉此JavaScript代碼？

問題描述

2 個解決方案

解決方案1 3 2013-05-20 02:27:50

解決方案2 0 2013-05-20 02:45:38

解決方案1
3 2013-05-20 02:27:50

解決方案2
0 2013-05-20 02:45:38