カスタム属性--JavaScript

1-属性値の取得

element.         
element.getAttribute('  ')

  ：
element.        --      （         ）
element.getAttribute('  ');     --          (  )          

code-1:

 

    
        var div = document.querySelector('div');
        // 1.         
        // (1) element.  
        console.log(div.id);
        //(2) element.getAttribute('  ')  get     attribute                             index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
    

2 - 设置元素属性值

// (1) element.  = ' '
div.id = 'test';
div.className = 'navs';

  ：
// (2) element.setAttribute('  ', ' ');            
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class            

3→属性の削除

element.removeAttribute('  )

// class   className
// 3      removeAttribute(  )    
div.removeAttribute('index');

4-H 5カスタム属性
カスタム属性の目的は、データを保存して使用するためです.データベースに保存せずにページに保存できるデータがあります.
カスタム属性取得は、getAttribute(「プロパティ」)で取得します.
ただし、ユーザー定義の属性によっては、曖昧さを引き起こしやすく、要素の内蔵属性かカスタム属性かを判断するのは容易ではない.
H 5は私達にカスタム属性を追加しました.
(1)H 5カスタム属性の設定
H 5は、カスタム属性を、date-先頭を属性名として指定し、値を付与する.

  ：


    JS  

element.setAttribute('date-index', 2);

（2）获取H5自定义属性

1、      element.getAttribute('data-index');
2、H5   element.dataset.index    element.dataset['index']  ie11     

ケース: var div = document.querySelector('div'); // console.log(div.getTime); console.log(div.getAttribute('getTime')); div.setAttribute('data-time', 20); console.log(div.getAttribute('data-index')); console.log(div.getAttribute('data-list-name')); // h5 data- // dataset data console.log(div.dataset); console.log(div.dataset.index); console.log(div.dataset['index']); // - ， console.log(div.dataset.listName); console.log(div.dataset['listName']);