JavaScript切换div背景颜色问题
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xh...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
#div {
height: 300px;
width: 300px;
background: red;
}
</style>
</head>
<body>
<div id = "div">
Hello World!
</div>
<button onclick = "word()">字变蓝/红</button>
<button onclick = "background()">背景变蓝/红</button>
<script>
function word() {
if(document.getElementById("div").style.color != "blue")
document.getElementById("div").style.color = "blue";
else
document.getElementById("div").style.color = "red";
}
function background() {
if(document.getElementById("div").style.background != "blue")
document.getElementById("div").style.background = "blue";
else
document.getElementById("div").style.background = "red"; // 这句为什么不执行？？？
}
</script>
</body>
</html>
源码如上,想通过两个按钮切换div字体与背景颜色（在红蓝之间切换）。字体颜色切换没问题，可背景第一次变蓝后再点就没反应了，else那没执行，好奇怪，代码应该没错，啊啊啊为什么呢？？？ 展开
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
#div {
height: 300px;
width: 300px;
background: red;
}
</style>
</head>
<body>
<div id = "div">
Hello World!
</div>
<button onclick = "word()">字变蓝/红</button>
<button onclick = "background()">背景变蓝/红</button>
<script>
function word() {
if(document.getElementById("div").style.color != "blue")
document.getElementById("div").style.color = "blue";
else
document.getElementById("div").style.color = "red";
}
function background() {
if(document.getElementById("div").style.background != "blue")
document.getElementById("div").style.background = "blue";
else
document.getElementById("div").style.background = "red"; // 这句为什么不执行？？？
}
</script>
</body>
</html>
源码如上,想通过两个按钮切换div字体与背景颜色（在红蓝之间切换）。字体颜色切换没问题，可背景第一次变蓝后再点就没反应了，else那没执行，好奇怪，代码应该没错，啊啊啊为什么呢？？？ 展开
展开全部
在IE11和chrome中测试没有错误。在火狐中测试会有这个问题。你用alert(document.getElementById("div").style.background)就可以发现为什么会错。第一次alert出来的值，在任意浏览器中都是空。在第二次，由于你已经给他赋值了，所以会alert出来一个值，在IE和chrome中都没问题会交替alert出来red和blue，但是在火狐中，alert出来的并不是单纯的red或者blue，而是“blue none repeat scroll 0% 0%”。所以要如何改，简单，你把
document.getElementById("div").style.background改成
document.getElementById("div").style.backgroundColor就行了。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把这三处 改成 backgroundColor
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function background() {
if(document.getElementById("div").style.backgroundColor != "blue")
document.getElementById("div").style.backgroundColor = "blue";
else
document.getElementById("div").style.backgroundColor = "red"; // 这句为什么不执行？？？
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我可以运行,可能问题是出现在,if后面少花括号,你试试看
if(document.getElementById("div").style.background != "blue"){
document.getElementById("div").style.background = "blue";
}
else{
document.getElementById("div").style.background = "red";
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
