H5自定義屬性的一些方式

杭城小劉發表於2017-12-21
H5

一、方式一

在很早以前我們自定義元素的屬性要通過 user-defined-attribute="value"的方式來設定自己需要的屬性

設定自定義屬性

<h1 user-defined-attribute="share">杭城小劉</h1>
複製程式碼

獲取自定義屬性

document.getElementsByTagName("h1")[0].getAttribute("user-defined-attribute")
複製程式碼

二、方式二

現在H5為我們提供了一個data屬性 **"data-" **作為字首，可以讓所有的HTML元素都支援自定義的屬性，只要在標籤裡面以 "data-"

為字首定義需要的屬性即可

設定自定義屬性

<h1 data-share="true">杭城小劉</h1>
複製程式碼

獲取自定義屬性（使用H5自定義屬性物件Dataset來獲取）

var myDiv = document.getElementsByTagName("h1")[0];
var theValue = myDiv.dataset;    //DOMStringMap物件

document.getElementsByTagName("h1")[0].dataset.share
document.getElementsByTagName("h1")[0].dataset["share"]
複製程式碼
document.getElementsByTagName("h1")[0].getAttribute("data-share")
複製程式碼

DOMStringMap是HTML5一種新的含有多個名-值對的互動變數

三、H5 dataset的操作

刪掉一個data屬性

delete myDiv.dataset.share
複製程式碼

增加一個屬性

myDiv.dataset.happy="ok"
複製程式碼

四、dataset相容性處理

如果不支援dataset，有必要做一下相容性處理

if(myDiv.dataset){
myDiv.dataset.sad = "false";
var thevalue = myDiv.dataset.sad;
}else{
myDiv.setAttribute("data-attribute","sad");
var theValue = myDiv.getAttribute("data-attribute"); // 獲取自定義屬性
}
複製程式碼

做一個實驗：

<!DOCTYPE html>
<html>

<head>
<title>我的標題</title>
<meta charset="utf-8" />
</head>

<body>
<h1 data-share="true">杭城小劉</h1>
</body>
<script>
console.log(document.getElementsByTagName("h1")[0].getAttribute("user-defined-attribute"));
</script>

</html>
複製程式碼

然後利用chrome除錯，在console命令列分別輸入3條指令，結果如下圖

實驗結果

可以看出來，dataset後跟的屬性是駝峰命名原則，如果多個單詞第二個單詞首字母需要大寫，檢查元素可以看到神奇的變化。

相關文章