正如我在标题上所写的,我正在尝试通过JS在html上创建夜间/白天模式。 为什么不起作用? 我应该改变什么才能让它工作呢? 两个按钮都坏了。 这是我的密码。
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marcel Duchamp</title>
<style>
.js{
font-weight:bold;
color:red;
}
#first{
font-weight:bold;
}
p{text-indent:15px;}
</style>
</head>
<body style="background-color:#FFD7AD;">
<h1 style="color:#FF5733;margin-left:5px;">Marcel Duchamp</h1>
<h2 style="background-color:orange;color:coral;padding:10px">France to USA</h2>
<p>
about Marcel Duchamp
</p>
<input type="button" value="Night" onclick="
document.querySelector('body').style.backgroundColor = #686868;
document.querySelector('body').style.color = 'white';
">
<input type="button" value="Day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';">
</body>
</html>
您有一个打字错误,不是onlcick
,而是onclick
。 并且您的颜色代码#686868
中漏掉了一个'
,它将破坏您的内联JS
。
工作代码在这里
null
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marcel Duchamp</title>
<style>
.js {
font-weight: bold;
color: red;
}
#first {
font-weight: bold;
}
p {
text-indent: 15px;
}
</style>
</head>
<body style="background-color:#FFD7AD;">
<h1 style="color:#FF5733;margin-left:5px;">Marcel Duchamp</h1>
<h2 style="background-color:orange;color:coral;padding:10px">France to USA</h2>
<p>
about Marcel Duchamp
</p>
<input type="button" value="Night" onclick="
document.querySelector('body').style.backgroundColor = '#686868';
document.querySelector('body').style.color = 'white';"/>
<input type="button" value="Day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';"/>
</body>
</html>