lovecoding
/
W250913


			
				
					
						
						
							1234567891011121314151617181920212223242526272829
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <!-- dataset 是html5新增的属性 可以在元素上添加自定义属性 来保存一些数据 -->
         <!-- data- 自定义属性 必须以data-开头 后面可以自定义属性名 -->
        <li data-id="1001" data-age="20">张三</li>
        <li data-id="1002" data-age="19">李四</li>
        <li data-id="1003" data-age="18">王五</li>
    </ul>
    <script>
        var aLi = document.querySelectorAll("li");
        for(var i=0;i<aLi.length;i++){
            aLi[i].onclick = function(){
                console.log(this.innerText);
                // 可以通过dataset属性来获取自定义属性的值
                console.log(this.dataset.age);
                console.log(this.dataset.id);
                
            }
        }
    </script>
</body>
</html>