本文介绍了HTML中的data属性如何在JavaScript中使用，展示了两种获取和修改data属性值的方法：getAttribute和dataset对象。通过例子演示了如何遍历并修改<ul>元素的<li>子项的data属性。
<!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>data属性</title>
</head>
<body>
<ul>
<li data-id="1" data-name="liBai" data-age="100">李白</li>
<li data-id="2" data-name="dianWei" data-userPassword="123">典韦</li>
<li data-id="3" data-name="jing">镜</li>
</ul>
<script>
/**
* data-* 属性可以在所有的HTML元素中嵌入数据
* 注意:
* 1. 属性名称不要包含大写字母
*/
var lis = document.querySelectorAll('ul li');
for (var i = 0; i < lis.length; i++) {
// 第一种方式
var id = lis[i].getAttribute('data-id');
var userPassword = lis[i].getAttribute('data-userPassword');
console.log(id);
console.log(userPassword);
lis[i].setAttribute('data-power', 2 * i);
// 第二种
//dataset获取所有data属性的值,属性值只保留data后面的部分
console.log('dataset---', lis[i].dataset);
var id2 = lis[i].dataset.id; // data-id 的值
// lis[i].dataset.id = 1000;
console.log('id2---', id2);
}
</script>
</body>
</html>上述运行结果:
扫一扫
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
