1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 li { 8 list-style-type: none; 9 cursor: pointer; 10 } 11 </style> 12</head> 13<body> 14<ul id="uu"> 15 <li>张三</li> 16 <li>李四</li> 17 <li>王五</li> 18 <li>赵六</li> 19 <li>小明</li> 20</ul> 21<script src="common.js"></script> 22<script> 23 //根据id获取ul标签,并且获取该标签中所有的li 24 var list = my$("uu").getElementsByTagName("li"); 25 for (var i = 0; i < list.length; i++) { 26 //先为每个li标签添加自定义属性 27 //list[i].score = (i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中 28 list[i].setAttribute("score", (i + 1) * 10); 29 30 //点击每个li标签,显示对应的自定义属性值 31 list[i].onclick = function () { 32 alert(this.getAttribute("score")); 33 }; 34 } 35</script> 36</body> 37</html>
JavaScript DOM操作案例自定义属性的设置跟获取
Stella981
2021-10-11
1210 0 0
点赞
收藏
评论区
加载中...