自定义属性

1.获取自定义属性的值，需要使用 getAttribute("自定义属性的名字") 才能获取这个属性的值。

<style>
  li {
    list-style: none;
    margin: 10px 0;
  }
</style>
<ul>
  <li score="10">王二</li>
  <li score="20">张三</li>
  <li score="30">李四</li>
  <li score="40">老五</li>
</ul>
<script>
  // html标签中没有什么自带的属性可以存储成绩的
  // 本身html标签没有这个属性，自己添加的---自定义属性---为了存储一些数据

  // 在html标签中添加自定义属性，如果想要获取这个属性的值，
  // 需要使用getAttribute("自定义属性的名字")才能获取这个属性的值

  // 获取所有的li标签
  var list = document.getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
    list[i].onclick = function () {
      // alert(this.score); // undefined

      alert(this.getAttribute("score")); // 可以
    }
  }
</script>

2.设置自定义属性的值，需要使用 setAttribute("属性的名字","属性的值") 来设置。

<ul>
  <li>王二</li>
  <li>张三</li>
  <li>李四</li>
  <li>老五</li>
</ul>
<script>
  var list = document.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);
  }
</script>

打开控制台可以发现属性已经被添加好了：

 

 

 

3.移除自定义属性，使用 removeAttribute("属性的名字") ，同时这个属性也能移除元素自带的属性。

<style>
  div {
    width: 200px;
    height: 100px;
    background-color: yellow;
  }

  .cls {
    background-color: green;
  }
</style>
<input type="button" value="移除自定义属性" id="btn" />
<div id="dv" score="10" class="cls"></div>
<script>
  function my$(id) {
    return document.getElementById(id);
  }
  // 点击按钮移除元素的自定义属性
  my$("btn").onclick = function () {
    // my$("dv").removeAttribute("score");
    // 移除元素的样式
    // 值没有了，但是属性还是有的
    // my$("dv").className = "";
    // 也可以移除元素的自带属性
    my$("dv").removeAttribute("class");
  }
</script>

按下按钮前：

 

 

 

 

 

 

 

 

按下按钮后：