HTML5中的data-*屬性該如何使用-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)HTML5中的data-*屬性該如何使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、成都做網(wǎng)站、啟東網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、啟東網(wǎng)絡(luò)營銷、啟東企業(yè)策劃、啟東品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供啟東建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

HTML5中的data-屬性主要用于存儲(chǔ)頁面中的私有自定義數(shù)據(jù)，目的是為了創(chuàng)建更好的用戶體驗(yàn)

HTML中新增了許多新的屬性，今天將要介紹HTML5中的data-* 屬性，希望對(duì)大家有所幫助。

HTML5中的data-*屬性該如何使用

data-* 屬性的含義

data-* 屬性用于存儲(chǔ)頁面或應(yīng)用程序的私有自定義數(shù)據(jù)是所有HTML元素上自定義data屬性，它存儲(chǔ)的數(shù)據(jù)能夠被JavaScript所利用，可以創(chuàng)建更好的用戶體驗(yàn)。

data-* 屬性包含兩個(gè)部分分別為：

屬性名：在屬性名中不能包含任何大寫字母，而且在前綴“data-”之后必須有一個(gè)字符，不能為空。

屬性值：屬性值可以是任何字符串。

<element data-*="somevalue">

例

data-animal-type="動(dòng)物類"

如何使用data-*屬性

由于自定義數(shù)據(jù)屬性是有效的HTML 5，因此可以在支持HTML 5文檔類型的任何瀏覽器中使用它們：

我們可以設(shè)置存儲(chǔ)在JavaScript動(dòng)畫中可能需要的元素的初始高度或不透明度，也可設(shè)置通過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="水果類">蘋果</li>  
</ul>

</body>
</html>

效果圖：

點(diǎn)擊之前

HTML5中的data-*屬性該如何使用

點(diǎn)擊之后

HTML5中的data-*屬性該如何使用

注意

數(shù)據(jù)屬性雖然靈活，但是數(shù)據(jù)屬性并不適用于所有問題比如存在更適合存儲(chǔ)數(shù)據(jù)的現(xiàn)有屬性或元素，則不應(yīng)使用數(shù)據(jù)屬性。例如，日期/時(shí)間數(shù)據(jù)應(yīng)該以語義方式顯示，而不是存儲(chǔ)在自定義數(shù)據(jù)屬性中，不應(yīng)該將特定的數(shù)據(jù)屬性與任何樣式的CSS相聯(lián)系。另外隨著數(shù)據(jù)屬性的使用越來越廣泛，命名約定中的沖突可能會(huì)變得越來越大，所以在命名時(shí)要注意盡量避免與插件或者公共屬性名混淆

看完上述內(nèi)容，你們對(duì)HTML5中的data-*屬性該如何使用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝大家的支持。

當(dāng)前題目：HTML5中的data-*屬性該如何使用-創(chuàng)新互聯(lián)
URL分享：http://muchs.cn/article38/degjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、移動(dòng)網(wǎng)站建設(shè)、云服務(wù)器、App開發(fā)、服務(wù)器托管、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)