html5的data屬性有什么作用

這篇文章主要講解了“html5的data屬性有什么作用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“html5的data屬性有什么作用”吧！

創(chuàng)新互聯(lián)公司長(zhǎng)期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為如皋企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)、網(wǎng)站制作，如皋網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

html5里面的data屬性的作用是存儲(chǔ)私有頁(yè)面后應(yīng)用的自定義數(shù)據(jù)，“data-*”是HTML5新增的一個(gè)自定義數(shù)據(jù)屬性功能，作為可以暫存數(shù)據(jù)使用，自定義的數(shù)據(jù)可以讓頁(yè)面擁有更好的交互體驗(yàn)；該屬性的屬性名不能包含大寫的字母，在“data-”后面至少有一個(gè)字符。

本教程操作環(huán)境：windows10系統(tǒng)、HTML5版本、Dell G3電腦。

html5里面的data屬性的作用

data-* 屬性用于存儲(chǔ)私有頁(yè)面后應(yīng)用的自定義數(shù)據(jù)。

data-* 屬性可以在所有的 HTML 元素中嵌入數(shù)據(jù)。

自定義的數(shù)據(jù)可以讓頁(yè)面擁有更好的交互體驗(yàn)（不需要使用 Ajax 或去服務(wù)端查詢數(shù)據(jù)）。

data-* 屬性由以下兩部分組成：

屬性名不要包含大寫字母，在 data- 后必須至少有一個(gè)字符。
該屬性可以是任何字符串

data-*是HTML5新增的一個(gè)自定義數(shù)據(jù)屬性功能，作為可以暫存數(shù)據(jù)使用。利用dataset可以獲取data-屬性構(gòu)造的對(duì)象，該方法目前只能在Chrome 、Opera等部分瀏覽器中實(shí)現(xiàn)，其他瀏覽器如需獲取其屬性值需要使用getAttribute和setAttribute來操作。

語(yǔ)法為：

<element data-*="somevalue">

somevalue 指定屬性值 (一個(gè)字符串)

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h2>物種</h2>
<p>點(diǎn)擊一個(gè)物種，看看它是什么類型：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>
</body>
</html>

輸出結(jié)果：

html5的data屬性有什么作用

感謝各位的閱讀，以上就是“html5的data屬性有什么作用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)html5的data屬性有什么作用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前題目：html5的data屬性有什么作用
分享鏈接：http://jinyejixie.com/article0/pgidoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站收錄、網(wǎng)站建設(shè)、App開發(fā)、手機(jī)網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣

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

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

html5的data屬性有什么作用

html5里面的data屬性的作用