【Web APIs】JavaScript 操作多个元素 ② ( 动态换肤效果 | 取消表里边距样
一、案例需求 - 实现动态换肤效果在页面中 设置三个图片选项 , 点击图片 , 可以动态设置不同的配景 ;
https://i-blog.csdnimg.cn/direct/e8aa5d853fb84b1db7f969d2e5080d6d.gif
二、案例核心要点
1、取消表里边距样式
在下面的 标签结构 结构中 , 需要准确的控制每个元素的排列 ;
https://i-blog.csdnimg.cn/direct/bf16478587074271a21f79808cb3ec46.png
默认的 表里边距 会严峻干扰 标签结构 , 先取消默认的表里边距样式 ;
* {
/* 取消默认内外边距样式 */
margin: 0;
padding: 0;
}
浏览器 标签元素 的 默认表里边距样式 可参考 扫除元素的默认表里边距样式 ★ ( 重点 ) 博客章节 ;
2、设置配景
为标签元素 设备配景 , 语法格式如下 :
background: pink url(image.jpg) no-repeatscroll center top ;
background 属性值的 各种配景样式属性的序次 没有举行强制定义 , 这里 建议按照如下序次举行编写 :
[*]配景颜色
[*]配景图片
[*]配景平铺
[*]配景滚动
[*]配景位置
设置 body 标签元素的大配景 居中置顶显示 不重复 代码如下 :
body {
/* 设置 body 标签元素的大背景 居中置顶显示 不重复 */
background: url(images/1.jpg) no-repeat center top;
}
参考博客 【CSS】CSS 总结 ③ ( CSS 配景设置 | 配景颜色 | 配景图片 | 配景图片平铺样式 | 配景图片位置 | 超大配景图片设置 | 配景附着 | 配景样式简写 | 配景半透明 ) ★
3、取消 li 默认样式
取消 li 的默认样式 , 默认前面带小圆点 :
li {
/* 取消 li 的默认样式 , 默认前面带小圆点 */
list-style: none;
}
4、准确计算宽度
标签结构如下 ,
<ul class="change_skin">
<!-- 将 img 标签放在 ul 列表的 li 列表项中 -->
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
</ul>
外部的 ul 宽度设置为 300 px , li 设置为左浮动 , 会从左到右排列 , 将 li 宽度设置为 100 px , 则正幸亏 ul 的 300 像素宽度上摆满 ;
.change_skin {
/* 设置宽度 , 每个图片 100 像素 , 三张图片占 300 像素 */
width: 300px;
}
.change_skin img {
/* 图片宽度 100 像素 高度自适应 */
width: 100px;
}
.change_skin li {
/* li 默认是块级元素 , 设置左浮动后 会从左到右排列 */
float: left;
/* 鼠标移动上去后变成小手 */
cursor: pointer;
}
达成下图效果 :
https://i-blog.csdnimg.cn/direct/bf16478587074271a21f79808cb3ec46.png
5、改变界面样式 - 鼠标移动上去变成小手
设置 cursor: pointer; 属性 , 鼠标移动上去后变成小手 ;
.change_skin li {
/* li 默认是块级元素 , 设置左浮动后 会从左到右排列 */
float: left;
/* 鼠标移动上去后变成小手 */
cursor: pointer;
}
https://i-blog.csdnimg.cn/direct/26c8bcc6442b4296894ef68a1d593ef5.png
参考 【CSS】更改用户界面样式 ① ( 更改鼠标样式 | 更改鼠标样式应用场景 | 代码示例 ) 博客 , 更改元素样式 ;
cursor 样式常用属性值 :
[*]default : 默认鼠标样式 , 白色箭头鼠标 ;
[*]pointer : 小手形状 ;
[*]move : 移动 - 十字架四个箭头 ;
[*]text : 文本 - 鼠标移动到文本上的样式 ;
[*]not-allowed : 禁止 ;
6、JS 分析
document.querySelector('.change_skin') 代码用于调用 Document 的 querySelector 方法 , 获取 类选择器 .change_skin 对应的单个元素 ;
然后调用 querySelectorAll('img') 函数 , 这是调用 Element 的 querySelectorAll 函数 , 获取多个 Element 元素 , 这里获取的是 .change_skin 类标签下的 img 标签元素 ;
之后 给 一组 img 标签元素注册 点击事件 , 一旦 img 标签被点击 , 那么将 该 img 标签的图片设置为 body 标签元素的配景图片 ;
部门代码示例 :
// 1. 获取元素
// 获取 change_skin 类下面的 img 标签元素
var imgs = document.querySelector('.change_skin').querySelectorAll('img');
// 2. 给 一组 img 标签元素注册 点击事件
// 一旦 img 标签被点击 , 那么将 该 img 标签的图片设置为 body 标签元素的背景图片
for (var i = 0; i < imgs.length; i++) {
imgs.onclick = function() {
// 控制台打印 第 i 个 img 标签 显示的 图片路径
console.log("被点击的 img 标签显示的图片路径是 : " + this.src);
// 通过调用 this.src 可以获取图片的相对路径
// 点击哪个图片 , 就把这个图片 设置为 body 标签元素的背景 图片
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
三、完整代码示例
1、代码示例
代码示例 :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inline Style Operation Example</title> <style> * {
/* 取消默认内外边距样式 */
margin: 0;
padding: 0;
}
body {
/* 设置 body 标签元素的大背景 居中置顶显示 不重复 */
background: url(images/1.jpg) no-repeat center top;
}
li {
/* 取消 li 的默认样式 , 默认前面带小圆点 */
list-style: none;
}
.change_skin { /* 设置宽度 , 每个图片 100 像素 , 三张图片占 300 像素 */ width: 306px; } .change_skin img { /* 图片宽度 100 像素 高度自顺应 */ width: 100px; } .change_skin li {
/* li 默认是块级元素 , 设置左浮动后 会从左到右排列 */
float: left;
/* 鼠标移动上去后变成小手 */
cursor: pointer;
}
</style></head><body> <ul class="change_skin">
<!-- 将 img 标签放在 ul 列表的 li 列表项中 -->
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
</ul>
<script> // 1. 获取元素
// 获取 change_skin 类下面的 img 标签元素
var imgs = document.querySelector('.change_skin').querySelectorAll('img');
// 2. 给 一组 img 标签元素注册 点击事件
// 一旦 img 标签被点击 , 那么将 该 img 标签的图片设置为 body 标签元素的背景图片
for (var i = 0; i < imgs.length; i++) {
imgs.onclick = function() {
// 控制台打印 第 i 个 img 标签 显示的 图片路径
console.log("被点击的 img 标签显示的图片路径是 : " + this.src);
// 通过调用 this.src 可以获取图片的相对路径
// 点击哪个图片 , 就把这个图片 设置为 body 标签元素的背景 图片
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script></body></html>
2、执行结果
https://i-blog.csdnimg.cn/direct/eceeb5d150b448a2b2478883e8840f61.gif
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]