0

我有一个网页，其中设置了一个链接来更改页面的背景颜色、链接的颜色和链接文本。这是我的代码：

<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 以反转这些语句，使页面返回白色背景，文本返回“关闭灯”，链接返回深蓝色.

谢谢

4

2 回答 2

3

您可以使用变量来存储状态并以此为基础进行切换。

<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-20T02:27:50.537 回答
0

您可以根据类值切换设置：

<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 元素，请使用具有适当样式的跨度：

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

<span class="clickable" ...> ... </span>
于 2013-05-20T02:45:38.817 回答