Question

尝试使用深色模式但使用深色模式按钮制作歌词站点只会导致错误

我尝试过在线查找解决方案，但是大多数人都说要在body标签内移动脚本，但是我的脚本已经在正文中

<DOCTYPE! html>
<html>
<head>
<title>Lyrics Page</title>
</head>
<style>
#bgr {
  background-color: white;
}
#lyrics {
   color:black; 
}
#songtitle {
   color: black; 
   text-align:center;
}
</style>
<body id=bgr>
    <script>
            function darkmode() {
              document.getElementById("bgr").style.background-color = "black"; 
              document.getElementById("songtitle").style.color = "grey";
              document.getElementById("lyrics").style.color = "grey";        
            }
            </script>
    <button type="button" onclick="darkmode()">Dark Mode</button>
<h1 id=songtitle>song</h1>
<h2 id=songtitle>artist</h2>
<br>
<center id=lyrics>paragraph 1</center>
<br>
<center id=lyrics>paragraph 2</center>
<br>
<center id=lyrics>paragraph 3</center>
</body>
</html>

Answer 1

您的问题是document.getElementById("bgr").style.background-color = "black";部分。在JavaScript中设置CSS属性时，应使用camelCase。因此，如果您进行更改：

document.getElementById("bgr").style.background-color = "black";

到

document.getElementById("bgr").style.backgroundColor = "black";

它将起作用。

Answer 2

您的JavaScript代码中存在语法错误。不是background-color，而是backgroundColor。

您的代码有效：

function darkmode() {
    document.getElementById("bgr").style.backgroundColor = "black"; 
    document.getElementById("songtitle").style.color = "grey";
    document.getElementById("lyrics").style.color = "grey";        
}

#bgr {
  background-color: white;
}
#lyrics {
   color:black; 
}
#songtitle {
   color: black; 
   text-align:center;
}

<DOCTYPE! html>
<html>
<head>
<title>Lyrics Page</title>
</head>
<body id="bgr">
    
    <button type="button" onclick="darkmode()">Dark Mode</button>
<h1 id="songtitle">song</h1>
<h2 id="songtitle">artist</h2>
<br>
<center id="lyrics">paragraph 1</center>
<br>
<center id="lyrics">paragraph 2</center>
<br>
<center id="lyrics">paragraph 3</center>
</body>
</html>

Answer 3

问题出在您的暗模式功能的第一行。

    'document.getElementById("bgr").style.background-color = "black";`

您需要将background-color更改为backgroundColor

JavaScript不会将连字符视为名称的一部分，而是将其减去。由于尝试将表达式设置为等于“ black”（而不是您想要的变量）而导致错误。

未捕获的ReferenceError ：（功能）darkmode在HTMLButtonElement.onclick中未定义

3 个答案: