html中怎么动态实现网页背景颜色的转换！比如下图有三种背景颜色可以选择，通过点击相应东西改变背景颜色
源代码如下，但是我不知道javascript（或者其他方法）中代码怎么写？请教高手？<spanstyle="margin-left:5px;cursor:pointer;...
源代码如下，但是我不知道javascript（或者其他方法）中代码怎么写？请教高手？
<span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#CCE8CF;background-color:#CCE8CF" title="最养眼的淡绿色" onclick="CBody('#CCE8CF')">__</span><span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#FFFFE1;background-color:#FFFFE1" title="清新的淡黄色" onclick="CBody('#FFFFE1')">__</span><span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#FFFFFF;background-color:#FFFFFF" title="默认白色背景" onclick="CBody('#FFFFFF')">__</span> 展开
<span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#CCE8CF;background-color:#CCE8CF" title="最养眼的淡绿色" onclick="CBody('#CCE8CF')">__</span><span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#FFFFE1;background-color:#FFFFE1" title="清新的淡黄色" onclick="CBody('#FFFFE1')">__</span><span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#FFFFFF;background-color:#FFFFFF" title="默认白色背景" onclick="CBody('#FFFFFF')">__</span> 展开
3个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
var _span=document.getElementsByTagName('span');
var CBody=document.getElementsByTagName('body')[0];
_span[0].onclick=function(){
CBody.style.background="#CCE8CF";
}
_span[1].onclick=function(){
CBody.style.background="#FFFFE1";
}
_span[2].onclick=function(){
CBody.style.background="#FFFFFF";
}
}
</script>
</head>
<body>
<span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#CCE8CF;background-color:#CCE8CF" title="最养眼的淡绿色"">__</span>
<span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#FFFFE1;background-color:#FFFFE1" title="清新的淡黄色"">__</span>
<span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#FFFFFF;background-color:#FFFFFF" title="默认白色背景"">__</span>
</body>
</html>
这是完整的代码，我只是给你加了<script></script>中的内容，也就是js代码，自己看下，不懂的还可以问我。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function(){
var _span=document.getElementsByTagName('span');
var CBody=document.getElementsByTagName('body')[0];
_span[0].onclick=function(){
CBody.style.background="#CCE8CF";
}
_span[1].onclick=function(){
CBody.style.background="#FFFFE1";
}
_span[2].onclick=function(){
CBody.style.background="#FFFFFF";
}
}
</script>
</head>
<body>
<span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#CCE8CF;background-color:#CCE8CF" title="最养眼的淡绿色"">__</span>
<span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#FFFFE1;background-color:#FFFFE1" title="清新的淡黄色"">__</span>
<span style="margin-left:5px;cursor:pointer;border:1px solid #b4b4b4;color:#FFFFFF;background-color:#FFFFFF" title="默认白色背景"">__</span>
</body>
</html>
这是完整的代码，我只是给你加了<script></script>中的内容，也就是js代码，自己看下，不懂的还可以问我。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function CBody(color){
document.body.backgroundColor=color;
}
document.body.backgroundColor=color;
}
追问
我以为document.getelementisby("id").body.backgroundcolor=color;呢！！
非常感谢你
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
貌似可以写在任何位置，
追问
javascript是可以写在任何位置
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
