data-* 自定義屬性

admin發表於2018-12-04

之前沒有關於自定義屬性的規範，所以管理起來比較混亂。

HTML5增加data-*用於設定自定義屬性，可以用來儲存資料，也可以稱之為資料屬性。

同時，JavaScript提供了dataset屬性用於專門管理自定義屬性，

具體參閱JavaScript dataset 一章節。

語法結構：

[HTML] 純文字檢視 複製程式碼
<element data-*="somevalue">

自定義屬性名稱由兩部分組成：

（1）."data-"是屬性名稱字首，固定形式。

（2）."data-"後面是自定義字串，可以認為是自定義屬性的真正名稱。

命名規則：

（1）.資料屬性要以data-開頭。

（2）.屬性名中的字元都是小寫，並且在字首 "data-" 之後必須有至少一個字元。

（3）.屬性值可以是任意字串。

瀏覽器支援:

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
  margin:5px;
}
[data-ant]{color:red}
</style>
</head>
<body>
  <div>螞蟻部落</div>
  <div data-ant="softwhy">螞蟻部落</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/04/131842gddeklceloqgdcos.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.建立自定義屬性data-ant，屬性值為"softwhy"。

（2）.然後通過屬性選擇器設定第二個div元素字型顏色為紅色。

相關文章