<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>属性补充 - dataset自定义属性</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-top: 15px;
}
.box {
width: 350px;
height: 420px;
border: 1px solid #000;
margin: 100px auto;
}
li {
float: left;
width: 20%;
text-align: center;
}
img:hover {
outline: 3px solid #0094ff;
}
</style>
</head>
<body>
<div class="box">
<div>
<img src="images/b1.jpg" id="big" alt="" />
</div>
<div>
<ul id="ul">
<!--data-src是自定义属性,存放对应大图的src-->
<li data-src="images/b1.jpg"><img src="images/s1.jpg" alt="" /></li>
<li data-src="images/b2.jpg"><img src="images/s2.jpg" alt="" /></li>
<li data-src="images/b3.jpg"><img src="images/s3.jpg" alt="" /></li>
<li data-src="images/b4.jpg"><img src="images/s4.jpg" alt="" /></li>
<li data-src="images/b5.jpg"><img src="images/s5.jpg" alt="" /></li>
</ul>
</div>
</div>
</body>
<script>
// 需求: 鼠标移入到小图,更换对应的大图(大图信息在小图对应的li中)
// 获取所有的li添加鼠标移入事件
document.querySelectorAll("#ul li").forEach(function (li) {
// 给li做鼠标移入事件, 取出自定义属性 赋值给 大图的src即可
li.onmouseover = function () {
// 用dataset来获取自定义属性:会自动取出data-前缀
console.log(li.dataset);
// src:去除data-前缀
//
// 应用:完善鼠标移入功能
// defaultColor:自动转成了小驼峰
// 访问属性:元素.dataset.去掉data-变成小驼峰的属性名
console.log(li.dataset.src);
// 修改(新增)元素:元素.dataset.去掉data-变成小驼峰的属性名 = 值
li.dataset.color = "red";
console.log(li.dataset.color);
li.dataset.defaultColor = "green"; // 小驼峰在页面显示的时候,会变成中划线
// 应用:完善鼠标移入功能
document.querySelector("#big").src = li.dataset.src;
};
});
</script>
</html>
JavaScript -WebAPI - 属性补充 - dataset自定义属性
最新推荐文章于 2024-03-04 12:46:42 发布