Question

我有一个网页，其链接设置为更改页面的背景颜色，链接的颜色和＆amp;链接文字。这是我的代码：

<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设置为反转这些语句，以便页面返回白色背景，文本返回＆＃34;关闭灯光＆＃34;，＆amp; ;链接回到了深蓝色。

谢谢

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 个答案: