一、方式一
在很早以前我們自定義元素的屬性要通過 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，有必要做一下兼容性處理
<script>
if (myDiv.dataset) {
myDiv.dataset.sad = "false";
var thevalue = myDiv.dataset.sad;
} else {
myDiv.setAttribute("data-attribute", "sad");
var theValue = myDiv.getAttribute("data-attribute"); // 獲取自定義屬性
}
</script>
做一個實驗：
<!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後跟的屬性是駝峯命名原則，如果多個單詞第二個單詞首字母需要大寫，檢查元素可以看到神奇的變化。
