JavaScript实现更换背景图片


Posted in Javascript onOctober 18, 2019

本文实例为大家分享了JavaScript实现更换背景图片的具体代码,供大家参考,具体内容如下

主要通过Js控制行内样式,达到更换背景图片的目的

效果:

JavaScript实现更换背景图片     

代码:

<!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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习(一)构建自己的JS库
Jan 02 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
CountUp.js数字滚动插件使用方法详解
Oct 17 #Javascript
CountUp.js实现数字滚动增值效果
Oct 17 #Javascript
countUp.js实现数字动态变化效果
Oct 17 #Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
countup.js实现数字动态叠加效果
Oct 17 #Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 #Javascript
You might like
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
js实现拖拽效果
2015/02/12 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
python实现装饰器、描述符
2018/02/28 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python实现TCP文件传输
2020/03/20 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
个人简历的自荐信
2013/10/23 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
活动志愿者自荐信
2014/01/27 职场文书
学校党员对照检查材料
2014/08/28 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python