尝试用JS制作夜间/白天模式按钮
正如我在标题上所写的，我正在尝试通过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>
共有1个答案
您有一个打字错误，不是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>-
现在我们提供一个夜间模式，你只需要在 body 或者 .page 或者 .content 上加上 .theme-dark。它和其中所有子元素都会变成夜间模式。你也可以单独给 .bar 加上 .theme-dark，这样可以单独使标题栏或者工具栏变成夜间模式。 夜间模式最大的区别是他的背景变成了黑色，而前景色变成了白色。 夜间模式还处在测试阶段，可能会有某些组件在夜间模式下显示不正常。有任何问题都可
-
本文向大家介绍三行Android代码实现白天夜间模式流畅切换，包括了三行Android代码实现白天夜间模式流畅切换的使用技巧和注意事项，需要的朋友参考一下 Usage xml android:background= ?attr/zzbackground app:backgroundAttr= zzbackground //如果当前页面要立即刷新，这里传入属性名称 比如R.attr.zzbackgr
-
获取设备夜间模式 接口说明 获取设备夜间模式 示例代码： Swift: RokidMobileSDK.device.getNightMode(device: RKDevice, completion: @escaping (_ error: RKError?, _ nightMode: SDKDeviceNightMode?) -> Void) Objc: RKDevice * device
-
获取设备夜间模式 接口说明 获取设备夜间模式 参数说明 字段 类型 必须？ 说明 deviceId String 是 设备ID 示例代码： String deviceId = "XXXXXX"; RokidMobileSDK.device.getNightMode(deviceId, new IGetDeviceNightMode() { @Override
-
我正在尝试在我的应用程序中启用黑夜模式，虽然它正在工作，但当我重新启动应用程序时，它会再次变为亮模式。基本上，我想保存黑夜模式状态，所以当重新启动应用程序时，它会在设置为暗模式后保持黑暗模式，而不是亮模式。我的相关代码如下： 我也尝试了这个活动，但它并没有保存黑暗模式的状态。
-
我正在做一个天气应用程序。整个应用程序都完成了，除夜间图标外，一切正常。我已经设置了当天的图标。但我不知道如何在一个条件下设置两个不同的图标来检查时间，如果当天显示的是太阳 这是我的代码： 请帮帮我。
-
本文向大家介绍Android夜间模式最佳实践，包括了Android夜间模式最佳实践的使用技巧和注意事项，需要的朋友参考一下 由于Android的设置中并没有夜间模式的选项，对于喜欢睡前玩手机的用户，只能简单的调节手机屏幕亮度来改善体验。目前越来越多的应用开始把夜间模式加到自家应用中，没准不久google也会把这项功能添加到Android系统中吧。 业内关于夜间模式的实现，有两种主流方案，各有其利弊
-
我正在为我的Android应用程序工作夜间模式。我使用ContextCompat.getColor以编程方式为一些UI元素获取颜色，但是这个方法并没有获取正确的颜色。当应用程序处于夜间模式时，因此遵循夜间资源限定符，ContextCompat从values/colors.xml中获取颜色，而不是从values-night/colors.xml中获取颜色。 奇怪的是，如果我从一个活动中调用conte