写三个li并设css颜色,然后js绑事件点击,改变body背景色为所选li颜色，那里写错了？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了写三个li并设css颜色,然后js绑事件点击,改变body背景色为所选li颜色，那里写错了？相关的知识，希望对你有一定的参考价值。
<style type="text/css">
ul
list-style: none;
li
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
.red
background-color: red;
.green
background-color: green;
.blue
background-color: blue;
</style>
<script type="text/javascript">
window.onload = function ()
var lis = document.getElementById("ulList").childNodes;
for (var i = 0; i < lis.length; i++)
if (lis[i].nodeType == 1)
this.onclick = function ()
//document.body.style.backgroundColor = this.getAttribute("class");这不行
document.body.style.backgroundColor = this.style.backgroundColor;//这样也不行
</script>
</head>
<body>
<ul id="ulList">
<li class="red"></li>
<li class="green"></li>
<li class="blue"></li>
</ul>
两个地方有错误：
this.onclick = function () 其中 this 改成 lis[i]。
//document.body.style.backgroundColor = this.getAttribute("class");这不行
document.body.style.backgroundColor = this.style.backgroundColor;//这样也不行
这段代码改成 document.body.className = this.className;
修改后的js如下：
window.onload = function ()var lis = document.getElementById("ulList").childNodes;
for (var i = 0; i < lis.length; i++)
if (lis[i].nodeType == 1)
lis[i].onclick = function ()
document.body.className = this.className;
参考技术A
JS
$("#ulList li").click(function()$("body").css("backgroundColor",$(this).css("backgroundColor"));
)<ul id="ulList">
<li class="red" ></li>
<li class="green" ></li>
<li class="blue" ></li>
</ul>
修改版 这样不用在li加事件
for (var i = 0; i < lis.length; i++)
if (lis[i].nodeType == 1)
lis[i].onclick = function ()
document.body.style.backgroundColor = this.getAttribute("class");
以上是关于写三个li并设css颜色,然后js绑事件点击,改变body背景色为所选li颜色，那里写错了？的主要内容，如果未能解决你的问题，请参考以下文章