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

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

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

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

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

data-* 屬性的含義

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

data-* 屬性包含兩個部分分別為：

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

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

<element data-*="somevalue">

例

data-animal-type="動物類"

如何使用data-*屬性

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

我們可以設(shè)置存儲在JavaScript動畫中可能需要的元素的初始高度或不透明度，也可設(shè)置通過JavaScript加載的Flash影片的參數(shù)以及存儲自定義網(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>點擊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>

效果圖：

點擊之前

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

點擊之后

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

注意

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

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

本文名稱：HTML5中的data-*屬性該如何使用
文章分享：http://jinyejixie.com/article18/pgejdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)頁設(shè)計公司、全網(wǎng)營銷推廣、ChatGPT、建站公司、手機網(wǎng)站建設(shè)

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

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

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

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