H5對自定義屬性的規定和添加獲取自定義屬性的方法 元素屬性那麼多，如何區分是自帶的屬性還是預設的屬性呢？ H5規定自帶的屬性有個data- 首碼，如data-index="1"，那麼,如何設置和獲取屬性值呢,請看下文。 <script> var divele = document.querySele ...
H5對自定義屬性的規定和添加獲取自定義屬性的方法
元素屬性那麼多，如何區分是自帶的屬性還是預設的屬性呢？ H5規定自帶的屬性有個data- 首碼，如data-index="1"，那麼,如何設置和獲取屬性值呢,請看下文。 <script>
var divele = document.querySelector("div");
//我們常用的添加和獲取自定義屬性
divele.setAttribute("flag", 1);
console.log(divele.getAttribute("flag"));
//屬性那麼多，如何區分是自帶的屬性還是預設的屬性呢？
//H5規定自帶的屬性有個data- 首碼，如data-index="1"
divele.setAttribute("data-index", 1);
console.log(divele.getAttribute("data-index")); //相容性比較好
//H5新增的獲取屬性值得方法,元素對象.dataset.index， dataset是個自定義屬性（規範的data-開頭）的集合
console.log(divele.dataset.index);
//divele.dataset[`index`] 獲取對象屬性的第二種方式
console.log(divele.dataset[`index`]);
//問題來了,如果自定義屬性被很多連接符拼接而成呢？
divele.setAttribute("data-temp-name", 2);
//獲取的時候用駝峰法
console.log(divele.getAttribute("data-temp-name")); //這種方式正常寫
console.log(divele.dataset.tempName);
console.log(divele.dataset[`tempName`]);
</script>
