H5自訂屬性data-*

標籤：EDA   move   doc   username   rem   .data   get   attr   div   

data屬性的設定和讀取方式：1、data-xxx 的格式，則採用正常格式來讀寫該屬性值<div id="test" data-name="小明">自訂屬性data-name</div>// 原生js方式var testData = document.getElementById("test");console.log(testData.dataset.name); // 讀取data-name的值console.log(testData.getAttribute("data-name")); // 讀取data-name的值testData.dataset.age = 18;  // 設定data-age的值testData.setAttribute("data-age",18);  // 設定data-age的值testData.removeAttribute("data-age");  // 刪除data-age屬性// jquery方式var $testData = $("#test");$testData.data("name");  // 讀取data-name的值$testData.data("age",18);  // 設定data-age的值$testData.removeData("age");  // 刪除data-age屬性2、data-xxx-yyy-zzz的格式，則採用首字母小寫駝峰式xxxYyyZzz讀寫該自訂屬性值<div id="test2" data-user-name="小明">自訂屬性data-user-name</div>// 原生js方式var testData2 = document.getElementById("test2");console.log(testData2.dataset.userName); // 讀取data-user-name的值console.log(testData2.getAttribute("data-user-name")); // 讀取data-user-name的值testData.dataset.userAge = 18;  // 設定data-user-age的值testData2.setAttribute("data-user-age",18);  // 設定data-user-age的值testData2.removeAttribute("data-user-age");  // 刪除data-user-age屬性// jquery方式var $testData2 = $("#test2");$testData2.data("userName");  // 讀取data-user-name的值$testData2.data("userAge",18);  // 設定data-user-age的值$testData2.removeData("userAge");  // 刪除data-user-age屬性

 

H5自訂屬性data-*