javascript - 为什么我的背景不会在点击十六进制颜色时发生变化?
问题描述
我有一个 html 文档,我想通过单击一个按钮来更改文档的背景颜色。
只要我使用“黄色”、“蓝色”、“红色”等颜色,这完全可以正常工作。
但是当我使用像“#000000”这样的十六进制颜色时,if 条件似乎没有注意到,该颜色并使用 else 函数。
如果我使用“黑色”而不是“#000000”,则该功能起作用并且背景变为红色。
我已经在 jsfiddle 上上传了工作示例。
你知道错误在哪里吗?
https://jsfiddle.net/c2gv9x01/
<button>COLOR SWITCH</button>
<script>
window.onload=function(){
document.querySelector("body").style.backgroundColor = '#000000';
document.querySelector("button").addEventListener("click", color);
}
function color() {
if (document.querySelector("body").style.backgroundColor == '#000000')
{document.querySelector("body").style.backgroundColor = 'red'; }
else {document.querySelector("body").style.backgroundColor = '#000000';}
}
</script>
解决方案
相同颜色有许多不同的字符串表示形式,因此仅匹配十六进制颜色字符串不一定有效,因为这不是您的浏览器用来报告它的内容:
window.onload = function() {
let body = document.querySelector("body")
body.style.backgroundColor = "#000000"
console.log(body.style.backgroundColor) // rgb(0, 0, 0) in most browsers
}
尽可能避免尝试匹配颜色;并非所有浏览器都会使用相同的表示,因此不能保证只切换到 rgb 而不是 hex。而是在设置所需颜色的元素上设置一个类名,然后测试该类名是否存在:
window.onload = function() {
document.querySelector("body").classList.add("black")
document.querySelector("button").addEventListener("click", color);
}
function color() {
let body = document.querySelector("body")
if (body.classList.contains("black")) {
body.classList.add("red")
body.classList.remove("black")
} else {
body.classList.add("black")
body.classList.remove("red")
}
}
.black {
background-color: #000
}
.red {
background-color: #F00
}
<button>COLOR SWITCH</button>
如果您需要匹配颜色,最安全的方法是创建一个具有相同背景颜色的临时元素,从该元素和您正在检查的元素中读取颜色,然后比较它们是否相同;无论浏览器碰巧使用的字符串表示形式如何,这都将起作用。
推荐阅读
- c# - 使用 BorderThickness = 0 向 WPF 表单添加阴影
- docker - 启动容器进程导致“exec:\”/tmp/installer.sh\“:权限被拒绝”
- c - C函数中堆栈的大小是多少?
- intellij-15 - 在 IntelliJ 终端中运行 java 程序
- nativescript - 使用 aws sns 的 nativescript 推送通知
- kubernetes - 使用 mod_auth_openidc 会话 SSO 到 kubernetes
- mysql - Mysql排序顺序日期0000-00-00第一
- android - 升级颤振后创建方法通道 - 无法解析方法 getFlutterView()
- javascript - 单击功能在具有相同类名的元素上执行多次
- python - 二维列表中元素的平均值