JavaScript dataset

admin發表於2018-12-05
JavaScript

dataset屬性用來管理HTML元素自定義屬性。

特別說明：僅對符合HTML5規範，通過data-*語法格式規定的自定義屬性有效。

關於data-*可以參閱data-* 自定義屬性一章節。

一.HTML屬性：

HTML屬性分為內建標準屬性與自定義屬性。

內建標準屬性，例如：

（1）.id：元素的唯一標識。

（2）.title：為元素附加額外的資訊，通常滑鼠懸浮會顯示。

（3）.class：與css的樣式類關聯。

自定義屬性：

HTML5之前沒有自定義屬性的標註規範，基本上可以是隨意定義。

程式碼如下：

[HTML] 純文字檢視 複製程式碼
<div antzone="螞蟻部落"></div>

上面程式碼為div元素新增一個自定義屬性antzone，屬性值為"螞蟻部落"。

為了便於管理HTML5對自定義屬性進行了規範，通過dataset屬性可以實現對其管理。

二.dataset屬性：

利用此屬性可以自定義屬性的獲取、新增或者修改操作。

語法結構一：

[JavaScript] 純文字檢視 複製程式碼
string = element.dataset.camelCasedName;

獲取指定名稱自定義屬性的值，

語法結構二：

[JavaScript] 純文字檢視 複製程式碼
element.dataset.camelCasedName = string;

修改或者新增指定名稱的自定義屬性。

特別說明：屬性名稱如果有必要，需要用駝峰寫法，後面會有詳細介紹。

瀏覽器支援：

（1）.IE11+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safria瀏覽器支援此方法。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
[data-softwhy]{
  color:red;
}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.dataset.softwhy="螞蟻部落";
  }
}
</script>
</head>
<body>
<div id="ant">螞蟻部落softwhy.com</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

點選按鈕可以為div元素新增一個名稱為"softwhy"的自定義屬性。

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/05/001350uc2cfxeaxc8kpeya.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.新增自定義屬性data-softwhy。

（2）.但是在通過dataset新增自定義屬性的時候，不能帶有"data-"。

（3）.新增此自定義屬性後，會通過屬性選擇器div的字型顏色設定為紅色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:120px;
  height:60px;
  text-align:center;
}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.dataset.antAone;
  }
}
</script>
</head>
<body>
<div id="ant" data-ant-zone="螞蟻部落">螞蟻部落softwhy.com</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201812/05/001416fn3f32ikrgk3v8ik.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.data-字首後面的屬性名稱也可以帶有連字元。

（2）.當使用dataset屬性進行動態操作的時候，需要轉換為駝峰寫法。

三.與getAttribute/setAttribute的區別:

getAttribute和setAttribute方法也可以設定和獲取元素的屬性，主要區別如下：

（1）.上述兩方法更加博愛，無論是否符合data-*語法格式，都可以順利獲取或者設定。

（2）.dataset則是專門針對符合HTML5規範的自定義屬性的管理，更加方便。

（3）.dataset屬性返回值是DOMStringMap物件，也就是說針對DOMStringMap物件的操作，然後影響到HTML元素，而getAttribute/setAttribute方法則是針對字串的操作。dataset屬性返回值截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/05/001430jksccylue0rztlwc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章