HTML5 data-*

weixin_34146805發表於2018-03-29
HTML

參考：

  1. https://www.cnblogs.com/dolphinX/p/3348458.html
  2. http://www.w3school.com.cn/tags/att_global_data.asp

HTML5新增了data-的方式來自定義屬性，其中為自定義的屬性名，使用這樣的結構可以進行資料存放。使用data-*可以解決自定義屬性混亂無管理的現狀。

小例子

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
  
    alert(animal.innerHTML + "是一種" + animalType + "。\n 另一種方法獲取的型別："+animal.dataset.animalType+"。");
}
</script>
</head>
<body>

<h1>物種</h1>

<p>點選某個物種來檢視其類別：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鳥類">喜鵲</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="魚類">金槍魚</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蠅虎</li>  
</ul>

</body>
</html>

相容情況

data-*的瀏覽器相容性情況十分不樂觀

Internet Explorer 11+
Chrome 8+
Firefox 6.0+
Opera 11.10+
Safari 6+

相關文章