JS 自定义属性值相关方法

一、普通自定义属性

    自定义属性:为了保存和使用数据，有些数据可以存储到页面中

    JS有两种方法获取属性值
    1.element.属性名   一般获取内置的属性 如:img.src

    2.element.getAttribute   获取自定义的属性(标准方法) 如:img.index

    设置自定义属性
        element.setAttribute('属性名',属性值)

    移除自定义属性
        element.removeAttribute('属性名')

1.使用

    //<div class = 'nav' id = 'div-id' index = 2></div>
    
    let div = document.querySelector('div')

    console.log( div.className ); //内置属性
    console.log( div.id );        //内置属性

    //一般获取自己定义的属性(标准)
    console.log( div.getAttribute('index') )

    //设置自定义属性值
    div.setAttribute('index','8')
    console.log( div.getAttribute('index') )

    //移除自定义属性
    div.removeAttribute('index')
    console.log( div.getAttribute('index') )  //已经被移除

二、data-自定义属性

    有些属性很难区分是内置还是用户自定义，因此在H5中增加了以data-为前缀的自定义属性，
    表明这是用户设置的属性,在使用中 JS 会将data-开头的自定义属性存储到dataset对象中

1.使用示例

    //<div getTime ='15' data-day = true data-help = 2></div>
    let div = document.querySelector('div')  //获取元素
    
    上述代码:getTime是自定义属性 但不是H5规定的data-前缀
    data-day是自定义属性，也是H5规定的前缀
    
    1.两者都可以通过使用自定义属性的方法
      getAttribute('属性名')
      
      div.getAttribute('getTime')  //15
      div.getAttribute('data-day') //true
      
      setAttribute('属性名',值)
      div.setAttribute('getTime',20)     //getTime = 20
      div.setAttribute('data-day',false) //data-day = false
      
      div.removeAttribute('getTime')
      div.removeAttribute('data-day')
     
     2.data-自定义属性独有获取方法(JS 会将data-开头的自定义属性存储到dataset对象中)
       
       element.dataset
       例:div.dataset    // {day:'true',help:'2'} 以对象形式存储
       
       获取方法:
       (1)element.dataset.属性名(data-后面的名字)
          例:div.dataset.day         //true
      
       (2)element.dataset['属性名']  
          例:div.dataset['day']      //true