本文实例为大家分享了JavaScript实现更换背景图片的具体代码,供大家参考,具体内容如下
主要通过Js控制行内样式,达到更换背景图片的目的
<>强效果:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>更换背景& lt;/title>
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
身体{
背景:url(/图片/01. jpg)不再重演;
background-size: 600 px;
}
ul {
list-style:没有;
}
ul李{
宽度:80 px;
高度:50 px;
边界:1 px固体# 222;
浮:左;
保证金:10 px;
}
ul李img {
宽度:80 px;
高度:50 px;
光标:指针;
}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {
var一=document.getElementsByTagName (img);
(var=0;我& lt;imgs.length;我+ +){
一个[我]。onclick=function () {
document.body.style。背景=" url (“+ this.src +”)没有重演”;//通过js控制改变行内样式
document.body.style。backgroundSize=" 600 px”;
}
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; ul>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/01.jpg "祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/02.jpg "祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/images/03.jpg "祝辞& lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
<强>注意:
正确写法:document.body.style。背景=" url (“+ this.src +”)没有重演”,
错误写法:document.body.style。背景="。
src”不再重演;以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
