JavaScript DOM操作案例自定义属性的设置跟获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul id="uu">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
    <li>小明</li>
</ul>
<script src="common.js"></script>
<script>
    //根据id获取ul标签,并且获取该标签中所有的li
    var list = my$("uu").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        //先为每个li标签添加自定义属性
        //list[i].score = (i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中
        list[i].setAttribute("score", (i + 1) * 10);

        //点击每个li标签,显示对应的自定义属性值
        list[i].onclick = function () {
          alert(this.getAttribute("score"));
        };
    }
</script>
</body>
</html>

 

posted @ 2018-07-25 22:19  {颜逸}  阅读(923)  评论(0编辑  收藏  举报