data属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">

</head>
<body>
<ul id="list"></ul>
<div id="info"></div>
<script type="text/javascript">
var data = {
01:{
name:"张三1",
age : 18
},
02:{
name:"张三2",
age : 14
},
03:{
name:"张三3",
age : 19
},
04:{
name:"张三4",
age : 17
},
}
var list = document.getElementById("list");
for (var id in data){
var item = data[id];
var liElement = document.createElement("li");
liElement.appendChild(document.createTextNode(item.name));
liElement.setAttribute("data-name",item.name);
liElement.setAttribute("data-age",item.age);
list.appendChild(liElement);
liElement.addEventListener("click",function(e){
console.log(e);
// this 是当前点击的元素
alert(this.name);
alert(this.getAttribute('data-age'));
console.log(this.dataset['age']);
})
}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/wyq-web/p/9496237.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值