标签中的自定义属性（设置、获取、移除）

最新推荐文章于 2024-06-17 11:38:01 发布

喵_美

最新推荐文章于 2024-06-17 11:38:01 发布

阅读量6.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_34708564/article/details/90478710

版权

获取标签自定义属性的方法（不是DOM元素）：getAttribute(“自定义属性的名字”)；
设置自定义属性:setAttribute(“属性的名字”,“属性的值”)；
移除自定义属性:removeAttribute(“属性的名字”)。也可以移除元素自带的属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div{
      width: 200px;
      height: 100px;
      background-color: yellow;
    }
    .cls{
      background-color: green;
    }
  </style>
</head>
<body>
     <input type="button" value="移除自定义属性" id="btn"/>
     <div id="dv" score="10" class="cls"></div>
     
<script>
  document.getElementById("btn").onclick=function () {
    //document.getElementById("dv").removeAttribute("score"); //移除标签的自定义属性
    //document.getElementById("dv").className="";//移除元素的类样式，值没有了，但属性还存在
    document.getElementById("dv").removeAttribute("class"); //也可以移除标签自带的属性，值和属性都移除
  };
</script>

</body>
</html>

自定义属性的作用：可以用于存储数据
注意：标签.自定义属性，这是DOM上的属性，不在页面中显示，若没有设置值，结果为undefined

<!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 score="10">同学A的成绩</li>
  <li score="20">同学B的成绩</li>
  <li score="30">同学C的成绩</li>
</ul>
<script>
  //html标签中有没有什么自带的属性可以存储成绩的----没有
  //本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据
  var list=document.getElementsByTagName("li");
  for(var i=0;i<list.length;i++){
    list[i].onclick=function () {
    //alert(this.score);//点了，DOM就有了score属性，但没有赋值，所以是undefined，他和标签中的score不是同一个东西
      alert(this.getAttribute("score"));
    };
  }
</script>
</body>
</html>

<!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 score="10">同学A的成绩</li>
  <li score="20">同学B的成绩</li>
  <li score="30">同学C的成绩</li>
</ul>
<script>
  var list=document.getElementById("uu").getElementsByTagName("li");
   for(var i=0;i<list.length;i++){ 
    //自定义属性在DOM对象上,不在标签中,网页中看不到该数据，可以用于存储不想让别人看到的数据
    //list[i].score=(i+1)*10;
    //设置标签中的自定义属性，可以在标签中看到该值
    list[i].setAttribute("score",(i+1)*10); 
    list[i].onclick=function(){
      alert(this.getAttribute("score"));
    };
  }
</script>
</body>
</html>

喵_美

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
标签中的自定义属性（设置、获取、移除）

获取标签自定义属性的方法（不是DOM元素）：getAttribute(“自定义属性的名字”)；设置自定义属性:setAttribute(“属性的名字”,“属性的值”)；移除自定义属性:removeAttribute(“属性的名字”)。自定义属性的作用：可以用于存储数据注意：标签.自定义属性，这是DOM上的属性，不在页面中显示，若没有设置值，结果为undefined<!DOCTY...
复制链接

扫一扫