问题在这里:
我想点击切换背景图片,改变背景图片的路径,具体在下面js代码的注释中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0; list-style:none;}
html,body,#main{ width:100%; height:100%;}
#main{background-i`请输入代码`mage:url(img/skin/320.jpg);
background-repeat:no-repeat;
background-size:cover;}
.list{ position:absolute; top:0; opacity:0.5;}
.list li{ width:260px; height:163px; margin-left:4px; float:left;}
</style>
</head>
<body>
<div id="main">
<ul class="list">
<li><img src="img/static/320.jpg" width="260" height="163" /></li>
<li><img src="img/static/321.jpg" width="260" height="163" /></li>
<li><img src="img/static/322.jpg" width="260" height="163" /></li>
<li><img src="img/static/323.jpg" width="260" height="163" /></li>
<li><img src="img/static/324.jpg" width="260" height="163" /></li>
<li><img src="img/static/325.jpg" width="260" height="163" /></li>
</ul>
</div>
</body>
</html>
<script>
var oMian=document.getElementById("main");
var aLi=document.getElementsByTagName("li");
for(i=0,l=aLi.length;i<l;i++){
(function(n){
aLi[n].onclick=function(){
console.log(n);
console.log(aLi[n].children[0].getAttribute("src"));
***/*这里为什么会打印出绝对路径*/
// 还有把getAtribute换成src ,为什么会打印出绝对路径?然后是,点击之后背景图片没有效果?***
/*children[0]这样写*/
// 返回函数不要引用任何循环变量,或者后续会发生变化的变量。
oMian.style.backgroundImage = "url(aLi[n].children[0].getAttribute('src'))"; /*后面加引号*/
oMian.style.backgroundSize = "cover";
}
})(i);
}
</script>
console.log(oMian.style.backgroundImage);始终得到的是第一个图片的地址,不知道怎么回事