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之函数直接量(function(){})()
Jun 29 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
简单的js表格操作
Sep 24 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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
discuz的php防止sql注入函数
2011/01/17 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP 类与构造函数解析
2017/02/06 PHP
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
VSCode搭建Vue项目的方法
2020/04/30 Javascript
javascript实现评分功能
2020/06/24 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
python中pip的安装与使用教程
2018/08/10 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
工作交流会欢迎词
2014/01/12 职场文书
好军嫂事迹材料
2014/01/15 职场文书
领导接待方案
2014/03/13 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
go语言中json数据的读取和写出操作
2021/04/28 Golang