从零开始前端学习[54]:js中自定义标签属性和自定义属性

最新推荐文章于 2021-04-21 19:50:32 发布

原创最新推荐文章于 2021-04-21 19:50:32 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#自定义属性 #自定义标签属性 #getAttribu #setAttribu

1.从零开始挑战前端专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了JavaScript中如何使用自定义标签属性与自定义属性。包括如何设置、获取和删除自定义标签属性，以及如何为DOM元素添加自定义属性，并通过示例代码展示了这些操作的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中自定义标签属性和自定义属性

自定义标签属性
自定义属性

提示
博主：章飞_906285288
博客地址:http://blog.youkuaiyun.com/qq_29924041

自定义标签属性

首先要知道什么是标签属性，标签属性也就是写在标签内部的属性，如class，id等
那什么是自定义的标签属性，也就是在标签内部的非系统定义的属性，如

<div class = "box" name = "nBox"></div>
对应的这个name = "nBox"也就是自定义标签属性。

对于自定义标签属性的相关操作如下标所示:

函数	函数含义
setAttribute([string]name,[string]value)	自定义标签属性的设置
getAttribute([string]name);	获取自定义标签属性
removeAttribute([string]name)	自定义标签属性的移除

自定义标签属性其实就是写在标签里面的原来没有的属性。

自定义属性

那与自定义标签属性相互对应的就是自定义属性，什么是自定义属性呢？？自定义属性可以认为是原来对象没有的属性，主要是针对javascript来说的在javascript的原来的对象中，原来是没有这样的属性的，但是我们可以通过外部增加的这样一种方式来添加这样的一种属性

如下所示:
<p>自定义属性</p>
<script>
    var aP = document.getElementByTagName("p");
        aP [0].onclick = function () {
        aP[0].index_number = 3;
      aP[0].custom_index = 4;
  console.log("aP[0].index_number:"+aP[0].index_number);
  console.log("aP[0].custom_index"+  aP[0].custom_index)
}

</script>

index_number和custom_index其实是标签对象原来没有的属性，但是我们在js中通过给其设置这样的一种属性的形式，然后让其具有这样的一种属性形式。

代码演示部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .main{width: 1200px;margin: 10px auto;box-shadow: 0 0 10px 0 deeppink;border: 1px solid transparent}
    p{width: 150px;height: 150px;background: greenyellow;margin: 5px;line-height: 150px;text-align: center}
  </style>
</head>
<body>
  <div class="main">
    <p class="attribute" comebaby = "comebaby" attribute = "123445">
        attribute
    </p>
    <p class="custom">
      custom
    </p>
  </div>
  <script>
    var aP = document.getElementsByTagName("p");
    aP[0].onclick = function () {
        this.getAttribute("comebaby");
        aP[0].number_index = 0;
        aP[0].style.backgroundColor = "red";

        console.log("aP[0].number_index:" + aP[0].number_index);
        console.log("aP[0].getAttribute(comebaby)"+this.getAttribute("comebaby"));
        console.log("aP[0].getAttribute(attribute)"+this.getAttribute("attribute"));
        this.setAttribute("attribute","2233456");
        console.log("aP[0].setAttribute(attribute)"+this.getAttribute("attribute"));
    }
    aP[1].onclick = function () {
      aP[1].index_number = 3;
      aP[1].custom_index = 4;
      aP[1].style.backgroundColor = "blue";
      console.log("aP[1].index_number:"+aP[1].index_number);
      console.log("aP[1].custom_index"+  aP[1].custom_index)
    }
  </script>
</body>
</html>