艾Q网»家园 › Web前端 › JScript实验室 › js实现简单的网站换肤功能，通过选项更换背景图 ...

js实现简单的网站换肤功能，通过选项更换背景图

一、HTML页面结构代码：
<body>
<ul class="baidu">
<li><img src=”images/1.jpg"></li>
<li><img src=”images/2.jpg"></li>
<li><img src=" images/3.jpg"></li>
<li><img src=”images/4. jpg"></li>
</ul>
二、加入的JS代码：
<script>
// 1.获取元素
var imgs = document . querySelector( ' . baidu') . querySelectorAll( 'img' );

// 2.循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs .onclick = function() {
// this.src 就是我们点击图片的路径如images/2.jpg
//把这个路径this.src给body就可以了
document . body . style. backgroundImage = 'url(' + this.src + ' ) ;
}
}
</script>
</body>

JScript

使用道具举报