溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關HTML5中的data-*屬性該如何使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
HTML5中的data-屬性主要用于存儲頁面中的私有自定義數據，目的是為了創建更好的用戶體驗
HTML中新增了許多新的屬性，今天將要介紹HTML5中的data-* 屬性，希望對大家有所幫助。
data-* 屬性的含義
data-* 屬性用于存儲頁面或應用程序的私有自定義數據是所有HTML元素上自定義data屬性，它存儲的數據能夠被JavaScript所利用，可以創建更好的用戶體驗。
data-* 屬性包含兩個部分分別為：
屬性名：在屬性名中不能包含任何大寫字母，而且在前綴“data-”之后必須有一個字符，不能為空。
屬性值：屬性值可以是任何字符串。
<element data-*="somevalue">
例
data-animal-type="動物類"
如何使用data-*屬性
由于自定義數據屬性是有效的HTML 5，因此可以在支持HTML 5文檔類型的任何瀏覽器中使用它們：
我們可以設置存儲在JavaScript動畫中可能需要的元素的初始高度或不透明度，也可設置通過JavaScript加載的Flash影片的參數以及存儲自定義網絡分析標記數據等等。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
list-style: none;
}
li{
width:50px;
height:50px;
background-color: pink;
text-align: center;
margin-left: 10px;
line-height: 50px;
float:left;
}
</style>
</head>
<body>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
console.log(animal.innerHTML + "是一種" + animalType + "。");
}
</script>
<p>點擊li時顯示其類別</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="動物類">小貓咪</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="水果類">蘋果</li>
</ul>
</body>
</html>效果圖：
點擊之前
點擊之后
注意
數據屬性雖然靈活，但是數據屬性并不適用于所有問題比如存在更適合存儲數據的現有屬性或元素，則不應使用數據屬性。例如，日期/時間數據應該以語義方式顯示，而不是存儲在自定義數據屬性中，不應該將特定的數據屬性與任何樣式的CSS相聯系。另外隨著數據屬性的使用越來越廣泛，命名約定中的沖突可能會變得越來越大，所以在命名時要注意盡量避免與插件或者公共屬性名混淆
看完上述內容，你們對HTML5中的data-*屬性該如何使用有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
