JS HTML标签的自定义属性的设置与获取

最新推荐文章于 2024-08-27 16:35:39 发布

夏沐_lk

最新推荐文章于 2024-08-27 16:35:39 发布

阅读量6.7k

点赞数 1

分类专栏： js代码文章标签： JS 自定义属性

本文链接：https://blog.csdn.net/guanmao4322/article/details/86515561

版权

js代码专栏收录该内容

65 篇文章 1 订阅

订阅专栏

设置自定义属性:setAttribute("属性的名字","属性的值");
获取自定义属性的值:getAttribute("属性的名字");

<!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("属性的名字")

   //获取所有的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"));
    };
  }



</script>

</body>
</html>

common.js

/**
 * 根据id属性的值,返回对应的标签元素
 * @param id id属性的值,string类型的
 * @returns {Element} 元素对象
 */
function my$(id) {
    return document.getElementById(id);
}