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

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

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

提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041


自定义标签属性

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

对应的这个name = "nBox"也就是自定义标签属性。

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

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

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

自定义属性

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

如下所示:

自定义属性

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

代码演示部分:


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <meta charset="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>

显示效果如下所示:

从零开始前端学习[54]:js中自定义标签属性和自定义属性_第1张图片

你可能感兴趣的:(从零开始挑战前端,约战前端)