JavaScript如何自定义标签属性

r囧r小猫 2021-11-10 23:28 554阅读 0赞

### 目录： ###

*  一、为何要自定义属性？
 *  二、自定义属性的2种方式
 *   *   *   *  第1种：直接在标签中添加想要的属性
             *  第2种：点语法：标签对象.自定义属性="自定义属性值"
             *  第3种：设置自定义属性:setAttribute("属性的名字","属性的值");
 *  三、移除自定义属性
 *  四、总结:

# 一、为何要自定义属性？ #

因为html原生并没有给我们一些像要的属性，而我们可以给标签添加自己定义的属性，目的是为了存储一些数据。

# 二、自定义属性的2种方式 #

#### 第1种：直接在标签中添加想要的属性 ####

例如：

<ul id="uu">
        <li score="10" >小明的成绩</li>
        <li score="20" >小红的成绩</li>
        <li score="30" >小黑的成绩</li>
        <li score="40" >小白的成绩</li>
        <li score="50" >小蓝的成绩</li>
    </ul>

要想获取其属性的值，是没办法直接"对象.属性"来获取的，因为js获取的对象说到底是DOM对象，而DOM对象中是没有自定义属性的，所以想直接通过"对象.属性"来获取其属性的值，是并不可以的。  
如果想要获取这个属性的值,则需要使用

> getAttribute(“自定义属性的名字”)；

方法才能获取这个属性的值。

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

#### 第2种：点语法：标签对象.自定义属性=“自定义属性值” ####

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    
    	<body>
    		<div id="1"></div>
    	</body>
    	<script>
    		var divObj = document.getElementById("1");
    		divObj.name = "dv";
    	</script>
    
    </html>

PS:这个方法可行的，但是不知道为什么在HTML结构中显示不出来，有时候做的一些案例就可以在结构中显示出。有知道原因的小伙伴望告知噢~

#### 第3种：设置自定义属性:setAttribute(“属性的名字”,“属性的值”); ####

<ul id="uu">
    	    <li>小明的成绩</li>
    	    <li>小红的成绩</li>
    	    <li>小黑的成绩</li>
    	    <li>小白的成绩</li>
    	    <li>小蓝的成绩</li>
    	</ul>
    
    <script>
        //根据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>

# 三、移除自定义属性 #

移除自定义属性:removeAttribute(“属性的名字”)

//点击按钮移除元素的自定义属性
      my$("btn").onclick=function () {
        //my$("dv").removeAttribute("score");
        //移除元素的类样式
        //my$("dv").className="";  
        //也可以移除元素的自带的属性     //值没有了,但是属性还是有的
        my$("dv").removeAttribute("class");  //也可以移除原有的属性
      };

# 四、总结: #

**设置自定义属性:setAttribute(“属性的名字”,“属性的值”);  
获取自定义属性的值:getAttribute(“属性的名字”)；**  
**移除自定义属性:removeAttribute(“属性的名字”)；**