JavaScript实现更换背景图片
更新时间：2019年10月18日 08:33:42 作者：whr瑞
这篇文章主要为大家详细介绍了JavaScript实现更换背景图片,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现更换背景图片的具体代码，供大家参考，具体内容如下
主要通过Js控制行内样式，达到更换背景图片的目的
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>更换背景</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: url(./images/01.jpg) no-repeat;
background-size: 600px;
}
ul{
list-style: none;
}
ul li{
width: 80px;
height: 50px;
border: 1px solid #222;
float: left;
margin: 10px;
}
ul li img{
width: 80px;
height: 50px;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function(){
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function(){
document.body.style.background = "url("+this.src+") no-repeat";//通过js控制改变行内样式
document.body.style.backgroundSize = "600px";
}
}
}
</script>
</head>
<body>
<ul>
<li><img src="./images/01.jpg" ></li>
<li><img src="./images/02.jpg" ></li>
<li><img src="./images/03.jpg" ></li>
</ul>
</body>
</html>
注意：
正确写法： document.body.style.background = “url(”+this.src+") no-repeat";
错误写法： document.body.style.background = "this.src“ no-repeat；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇浅谈JS函数定义方式的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了JavaScript计算某一天是星期几的方法,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了详解微信小程序实现WebSocket心跳重连，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了js 封装父页面子页面交互接口的实例代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了JavaScript中 this 指向问题深度解析,JavaScript 中的 this 指向问题有很多文章在解释，仍然有很多人问，本文给大家深度解析，需要的朋友可以参考下2017-02-02
本篇文章主要介绍了使用Ajax生成的Excel文件并下載的实例，具有一定的参考价值，有需要的可以了解一下。2016-11-11
这篇文章主要介绍了js同源策略,较为详细的分析了javascript中同源策略的概念与相关应用注意事项,需要的朋友可以参考下2015-05-05
本文实例讲述了javaScript数组随机排列实现随机洗牌功能的方法。分享给大家供大家参考。2015-08-08
这篇文章主要介绍了如何实现小程序tab栏下划线动画效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要为大家介绍了简单易懂的JSONP和CORS跨域方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论