這篇文章主要為大家展示了“html5如何使用data-*屬性”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5如何使用data-*屬性”這篇文章吧。

十年專注成都網(wǎng)站制作，成都定制網(wǎng)頁設(shè)計，個人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)頁設(shè)計,高端網(wǎng)頁制作,對白烏魚等多個方面，擁有豐富的網(wǎng)站設(shè)計經(jīng)驗。

實例

使用 data-* 屬性來嵌入自定義數(shù)據(jù)：

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

瀏覽器支持

IE、Firefox、Chrome、Safari、Opera

所有主流瀏覽器都支持 data-* 屬性。

定義和用法

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

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

存儲的（自定義）數(shù)據(jù)能夠被頁面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗（不進行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫查詢）。

data-* 屬性包括兩部分：

• 屬性名不應(yīng)該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符

• 屬性值可以是任意字符串

注釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。

HTML 4.01 與 HTML5 之間的差異

data-* 屬性是 HTML5 中的新屬性。

語法

<element data-*="somevalue">

屬性值

值	描述
somevalue	規(guī)定屬性的值（以字符串）。

在jQuery的attr與prop提到過在IE9之前版本中如果使用property不當(dāng)會造成內(nèi)存泄露問題，而且關(guān)于Attribute和Property的區(qū)別也讓人十分頭痛，在HTML5中添加了data-*的方式來自定義屬性，所謂data-*實際上上就是data-前綴加上自定義的屬性名，使用這樣的結(jié)構(gòu)可以進行數(shù)據(jù)存放。使用data-*可以解決自定義屬性混亂無管理的現(xiàn)狀。

讀寫方式

data-*有兩種設(shè)置方式，可以直接在HTML元素標(biāo)簽上書寫

<div id="test" data-age="24">
        Click Here
    </div>

其中的data-age就是一種自定義屬性，當(dāng)然我們也可以通過JavaScript來對其進行操作，HTML5中元素都會有一個dataset的屬性，這是一個DOMStringMap類型的鍵值對集合

var test = document.getElementById('test');
        test.dataset.my = 'Byron';

這樣就為div添加了一個data-my的自定義屬性，使用JavaScript操作dataset有兩個需要注意的地方

1. 我們在添加或讀取屬性的時候需要去掉前綴data-*，像上面的例子我們沒有使用test.dataset.data-my = 'Byron';的形式。

2. 如果屬性名稱中還包含連字符(-)，需要轉(zhuǎn)成駝峰命名方式，但如果在CSS中使用選擇器，我們需要使用連字符格式

以上是“html5如何使用data-*屬性”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：html5如何使用data-*屬性
標(biāo)題網(wǎng)址：http://sd-ha.com/article30/ghdipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、、做網(wǎng)站

廣告

聲明：本網(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)