Loading... ###### 1、html部分代码 ```html <div class="box"> <div class="box1" data-id="1">123</div> <div class="box1" data-id="2">456</div> <div class="box1" data-id="3">789</div> </div> ``` ###### 2、css部分代码 ```css * { margin: 0; padding: 0; } .box1 { cursor: pointer; font-size: 20px; background-color: #000; margin-bottom: 5px; color: #fff; } ``` ###### 3、js部分代码 ```js // 获取元素 let box = document.querySelectorAll('.box1'); // 循环添加点击事件 box.forEach((item) => { item.onclick = function(e){ /** * 获取自定义属性的两种方式: * 1、e.path[0].dataset.id ---- 通过点击事件的 event 对象获取 * 2、item.dataset['id'] ---- 通过 dataset 属性获取 */ console.log(e.path[0].dataset.id, '-----', item.dataset['id']); } }) ``` ###### 4、效果图 ![效果图][1] [1]: https://www.renlmingj.cn/usr/uploads/2024/06/2912707794.png 最后修改:2024 年 06 月 13 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用,请随意赞赏