如何使用HTML5中的data-*屬性
發(fā)表時(shí)間：2023-08-28 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]HTML5中的data-屬性主要用于存儲(chǔ)頁(yè)面中的私有自定義數(shù)據(jù)，目的是為了創(chuàng)建更好的用戶體驗(yàn)HTML中新增了許多新的屬性，今天將要介紹HTML5中的data-* 屬性，希望對(duì)大家有所幫助�！就扑]課程：HTML5課程】data-* 屬性的含義data-* 屬性用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有自定義數(shù)據(jù)是...
HTML5中的data-屬性主要用于存儲(chǔ)頁(yè)面中的私有自定義數(shù)據(jù)，目的是為了創(chuàng)建更好的用戶體驗(yàn)
HTML中新增了許多新的屬性，今天將要介紹HTML5中的data-* 屬性，希望對(duì)大家有所幫助。
【推薦課程：HTML5課程】
data-* 屬性的含義
data-* 屬性用于存儲(chǔ)頁(yè)面或應(yīng)用程序的私有自定義數(shù)據(jù)是所有HTML元素上自定義data屬性，它存儲(chǔ)的數(shù)據(jù)能夠被JavaScript所利用，可以創(chuàng)建更好的用戶體驗(yàn)。
data-* 屬性包含兩個(gè)部分分別為：
屬性名：在屬性名中不能包含任何大寫(xiě)字母，而且在前綴“data-”之后必須有一個(gè)字符，不能為空。
屬性值：屬性值可以是任何字符串。
<element data-*="somevalue">
例
data-animal-type="動(dòng)物類"
如何使用data-*屬性
由于自定義數(shù)據(jù)屬性是有效的HTML 5，因此可以在支持HTML 5文檔類型的任何瀏覽器中使用它們：
我們可以設(shè)置存儲(chǔ)在JavaScript動(dòng)畫(huà)中可能需要的元素的初始高度或不透明度，也可設(shè)置通過(guò)JavaScript加載的Flash影片的參數(shù)以及存儲(chǔ)自定義網(wǎng)絡(luò)分析標(biāo)記數(shù)據(jù)等等。
例：
<!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>點(diǎn)擊li時(shí)顯示其類別</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="動(dòng)物類">小貓咪</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="水果類">蘋(píng)果</li>
</ul>
</body>
</html>效果圖：
點(diǎn)擊之前
點(diǎn)擊之后
注意
數(shù)據(jù)屬性雖然靈活，但是數(shù)據(jù)屬性并不適用于所有問(wèn)題比如存在更適合存儲(chǔ)數(shù)據(jù)的現(xiàn)有屬性或元素，則不應(yīng)使用數(shù)據(jù)屬性。例如，日期/時(shí)間數(shù)據(jù)應(yīng)該以語(yǔ)義方式顯示，而不是存儲(chǔ)在自定義數(shù)據(jù)屬性中，不應(yīng)該將特定的數(shù)據(jù)屬性與任何樣式的CSS相聯(lián)系。另外隨著數(shù)據(jù)屬性的使用越來(lái)越廣泛，命名約定中的沖突可能會(huì)變得越來(lái)越大，所以在命名時(shí)要注意盡量避免與插件或者公共屬性名混淆
總結(jié)：以上就是本篇文章的全部?jī)?nèi)容了，希望對(duì)大家學(xué)習(xí)HTML5有所幫助。
以上就是如何使用HTML5中的data-*屬性的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
