07-自定义属性

最新推荐文章于 2024-05-02 09:53:26 发布

陀陀吖

最新推荐文章于 2024-05-02 09:53:26 发布

阅读量91

点赞数

分类专栏： javascript之webAPI

本文链接：https://blog.csdn.net/weixin_40422393/article/details/90914991

版权

javascript之webAPI 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、自定义属性的映入

<!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>