网站的建设初步定位,做ui的网站,给网站做推广,网络营销与直播电商专升本文章目录 1. 演示效果2. 分析思路3. 代码实现3.1. 方式一3.2. 方式二3.3. 整体代码 1. 演示效果 2. 分析思路
先编写样式#xff0c;弄好布局和排版。遍历这个集合#xff0c;对每个图片元素#xff08;img#xff09;添加一个点击事件监听器。可以使用 for 或者 forEach … 文章目录 1. 演示效果2. 分析思路3. 代码实现3.1. 方式一3.2. 方式二3.3. 整体代码 1. 演示效果 2. 分析思路
先编写样式弄好布局和排版。遍历这个集合对每个图片元素img添加一个点击事件监听器。可以使用 for 或者 forEach 进行遍历。
3. 代码实现
3.1. 方式一
使用 for 进行循环。
for (let i 0; i imgs.length; i) {//添加点击事件imgs[i].onclick function () {//使用this(this:谁调用我,我代表谁.this就代表点击的那个图片)console.log(this.src);//设置body的背景为点击的图片document.querySelector(body).style.background url(${this.src});};
}3.2. 方式二
使用 forEach 进行循环可以省略 i。
imgs.forEach((img) {img.addEventListener(click, function () {document.body.style.backgroundImage url(${this.src});});
});3.3. 整体代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleqq换肤效果/titlestyle* {padding: 0;margin: 0;}body {background: url(./img/1.jpg);background-size: cover;}.baidu {width: 440px;list-style: none;margin: 100px auto;background: white;overflow: hidden;}.baidu li {float: left;margin-top: 2px;}.baidu img {width: 100px;padding: 5px;cursor: pointer;}/style/headbodyul classbaiduliimg src./img/1.jpg alt //liliimg src./img/2.jpg alt //liliimg src./img/3.jpg alt //liliimg src./img/4.jpg alt //li/ulscript// 获取元素const imgs document.querySelectorAll(img);// for (let i 0; i imgs.length; i) {// //添加点击事件// imgs[i].onclick function () {// //使用this(this:谁调用我,我代表谁.this就代表点击的那个图片)// console.log(this.src);// //设置body的背景为点击的图片// document.querySelector(body).style.background url(${this.src});// };// }imgs.forEach((img) {img.addEventListener(click, function () {document.body.style.backgroundImage url(${this.src});});});/script/body
/html
