自定義屬性 data

2022-05-06 03:45:10 字數 1442 閱讀 4832

在html5中新增了data-*的方式來自定義屬性，所謂data-*實際上上就是data-字首加上自定義的屬性名，使用這樣的結構可以進行資料存放。使用data-*可以解決自定義屬性混亂無管理的現狀。

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

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

<


h2 data-weather


="rain"


>今天天氣很好


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

<


h2 data-birth-date


="19940219"


>今天天氣很好


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

//


html//


jsvar h2 = document.queryselector('h2');


h2.dataset.weather = "rain";
這樣也是設定了乙個 data-weater 的自定義屬性，值為 rain，html5 中元素都會有乙個dataset的屬性，這是乙個 domstringmap 型別的鍵值對集合。

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

//


html//


jsvar h2 = document.queryselector('h2');


h2.dataset.birthdate = "19940219";
讀取的時候通過dataset屬性，使用」.」來獲取自定義屬性，需要去掉 data- 字首，連字元需要轉化為駝峰命名：

//


html（設定）//


js（讀取）


var h2 = document.queryselector('h2');


console.log(h2.dataset.weather); 


//rain


console.log(h2.dataset.birthdate); //


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

h3[data-birth-date="19940219"]
結果如圖：

//


html//


js//


設定$("h3").data();


$("h3").data("birth-date", "rain");


//讀取


console.log($("h3").data("weather")); //


rain


console.log($("h3").data("birth-date")); //


19940219

HTML5自定義data屬性

可能大家在使用jquery mobile時，經常會看到data role data theme等的使用，比如 通過如下 即可實現頁首的效果 通過手機瀏覽，效果如下 為什麼寫乙個data role header 就能實現底部為黑色 文字居中顯示的效果呢？我們寫乙個html頁面，自定義乙個data ch...

html5 data 自定義屬性

在html5中我們可以通過data 來設定我們需要的自定義屬性，進行資料存放 root 之後可以通過js指令碼獲取 設定自定義屬性，也可以使用css屬性選擇器進行樣式設定 我們先建立乙個id為root的div元素，自定義屬性age值為25，然後我們對其自定義屬性進行操作 let root docum...

html5的自定義data 屬性

html5中新增了data 的方式來自定義屬性，所謂data 實際上上就是data 字首加上自定義的屬性名，使用這樣的結構可以進行資料存放。使用data 可以解決自定義屬性混亂無管理的現狀。data 有兩種設定方式，可以直接在html元素標籤上書寫 click here 可是，怎麼來讀取這些資料呢？...