07-自定义属性

最新推荐文章于 2025-02-16 16:46:38 发布

原创最新推荐文章于 2025-02-16 16:46:38 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

javascript之webAPI 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种在HTML元素中使用自定义属性的方法，通过JavaScript动态添加和读取自定义属性，实现对元素状态的管理和交互反馈。文章详细展示了如何利用setAttribute和getAttribute方法来增强网页的动态性和响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、自定义属性的映入

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    ul{
      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>

 /* 总结:
      设置自定义属性:setAttribute("属性的名字","属性的值");
      获取自定义属性的值:getAttribute("属性的名字")
      移除某个自定义属性：removeAttribute("class");
 */

   //获取所有的li标签,然后为每个标签中动态的添加自定义属性和值
  //点击的时候获取该标签的自定义属性的值

   //根据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"));
      //this.my$("dv").removeAttribute("score");   //移除自定义属性
    };
  }

</script>

</body>
</html>