JavaScript实现更换背景图片

╰+哭是因爲堅強的太久メ 2023-06-08 04:34 13阅读 0赞

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

**效果：**

![20191016103059100.gif][]

**代码：**

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

[20191016103059100.gif]: /images/20230531/f712ba4a12a04c0b9d1894c7d8c875b1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现更换背景图片

主要通过Js控制行内样式，达到更换背景图片的目的效果： ![20191016103059100.gif][] 代码： <!DOCTYPE html

╰+哭是因爲堅強的太久メ/ 2023年06月08日 04:34/ 0 赞/ 14 阅读

相关【JavaScript】------ 实现HTML背景图片文字导出成图片（html2canvas）-示例代码

> 1. html2canvas.min.js 下载地址: http://www.bootcdn.cn/html2canvas/ > 2. [modernizr-2.8.3

短命女/ 2023年02月09日 14:28/ 0 赞/ 186 阅读

相关 FinalShell更换背景颜色

1. 打开FinalShell点击右上角多功能按键，点击选项 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shad

墨蓝/ 2022年12月20日 08:54/ 0 赞/ 866 阅读

相关 javascript-------一张图片的不同背景

<div style=" width:50px; height:38px;background-image:url(http://album.hi.csdn.net/app\

冷不防/ 2022年08月24日 00:53/ 0 赞/ 206 阅读

相关 photoshop实现图片更换背景

闲着没事拿着自己的图p了一下，想换一个高大上的北京，哈哈，结果还是不错的，分享一下我换背景的经历，另外照片白底换成蓝底也是类似的，新手完全可以做到的。 1.首先安装ps软件

柔光的暖阳◎/ 2022年07月24日 12:03/ 0 赞/ 327 阅读

相关 gitbook小插件:给书自动更换背景图片

突发兴趣给gitbook开发了一款可以自动更换背景图片的小插件这样看书的时候也不疲劳了. 哈哈, 图片可以自定义, 自动切换时间也可以自定义. 地址: [https

傷城~/ 2022年05月30日 11:48/ 0 赞/ 371 阅读

相关 idea 更换编辑器背景图片

1、打开File \-> Setting \-> Plugs -> 搜索BackgroundImage。然后安装。如图 ![806341-20170526205126654

墨蓝/ 2022年04月18日 04:52/ 0 赞/ 389 阅读

相关 CSS实现鼠标移动到图片，更换图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xh

「爱情、让人受尽委屈。」/ 2022年03月09日 03:28/ 0 赞/ 317 阅读

相关 VSCode更换背景主题快捷键

vscode 默认是有好几种主题的，有颜色较深的，也有比较柔和的；我们可以使用快捷键来快速的选择更换主题；首先：按下 Ctrl + k 然后再按下：Ctrl +

约定不等于承诺〃/ 2022年02月23日 05:18/ 0 赞/ 595 阅读

相关 JQuery自动更换背景图

JQuery自动更换背景图 ![在这里插入图片描述][2020102620010546.gif_pic_center] 思路：给一个div存放图片设置大小及背景图，将

- 日理万妓/ 2021年07月25日 17:06/ 0 赞/ 441 阅读