自定義屬性 —— data-*

一、基本概念

 

在HTML5中添加了data-*的方式來自定義屬性，所謂data-*實際上上就是data-前綴加上自定義的屬性名，使用這樣的結構可以進行數據存放。使用data-*可以解決自定義屬性混亂無管理的現狀。

 

二、原生js中自定義屬性

 

1，設置自定義屬性

 

設置自定義屬性有如下2種方式。

 

（1）第一種方式是可以直接在 HTML 標簽上面書寫：

<h2 data-weather="rain">今天天氣很好</h2>

 

上面 data-weather 就是一個自定義屬性，值為 rain。

在通過這個方式設置的時候需要注意的是，如果設置的自定義屬性是多個單詞的組合的話，需要用中橫線（-）鏈接，比如：

<h2 data-birth-date="19940219">今天天氣很好</h2>

 

 

（2）第二種方式是通過 js 的 dataset 屬性來設置：

// html
<h2>今天天氣很好</h2>

// js
var h2 = document.querySelector('h2');
h2.dataset.weather = "rain";

 

這樣也是設置了一個 data-weater 的自定義屬性，值為 rain，HTML5 中元素都會有一個dataset的屬性，這是一個 DOMStringMap 類型的鍵值對集合。

通過這種方式設置同樣需要注意，如果設置的是多個單詞的組合的話，需要使用駝峰命名法來書寫：

// html
<h2>今天天氣很好</h2>

// js
var h2 = document.querySelector('h2');
h2.dataset.birthDate = "19940219";

 

2，js讀取自定義屬性

 讀取的時候通過dataset屬性，使用”.”來獲取自定義屬性，需要去掉 data- 前綴，連字符需要轉化為駝峰命名：

// html（設置）
<h2 data-weather="rain" data-birth-date="19940219">今天天氣很好</h2>

// js（讀取）
var h2 = document.querySelector('h2');
console.log(h2.dataset.weather);   // rain
console.log(h2.dataset.birthDate);   // 19940219

 

3、css讀取自定義屬性

也可以通過自定義屬性來書寫樣式：

h3[data-birth-date="19940219"]{
    color: red;
}

結果如圖：

 

三、jQuery中的自定義屬性

// html
<h3>今天天氣很好</h3>

// js
//設置
$("h3").data({"weather":"rain", "birth-date": "19940219"});
$("h3").data("birth-date", "rain");

// 讀取
console.log($("h3").data("weather"));   // rain
console.log($("h3").data("birth-date"));   // 19940219