html中的data-*的用法和作用 自定義屬性

定義和用法

**data- *** 屬性用于存儲私有頁面后應(yīng)用的自定義數(shù)據(jù)。
**data- *** 屬性可以在所有的 HTML 元素中嵌入數(shù)據(jù)。
自定義的數(shù)據(jù)可以讓頁面擁有更好的交互體驗(不需要使用 Ajax 或去服務(wù)端查詢數(shù)據(jù))。
**data- *** 屬性由以下兩部分組成:
屬性名不要包含大寫字母,在 data- 后必須至少有一個字符。
該屬性可以是任何字符串
注意: 自定義屬性前綴 "data-" 會被客戶端忽略。

例如,定義不同的動物:

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

用法

data-* 的值的獲取和設(shè)置
2種方法:
1、傳統(tǒng)方法
getAttribute() 獲取data-屬性值;
setAttribute() 設(shè)置data-
屬性值
2、HTML5新方法
例如 data-href
dataset.href 獲取data-href屬性值
dataset.href = 'http://imooc.com' 設(shè)置data-href屬性值
總結(jié):傳統(tǒng)方法無兼容性問題,但是不夠優(yōu)雅、方便
HTML5新方法很優(yōu)雅、方便,但是有兼容性問題,可以在移動端開發(fā)或不支持低版本瀏覽器的項目中>使用
兼容性問題看這兒:http://caniuse.com/#search=dataset

個人理解:用法

之前不是很懂為什么會有這樣的功能的出現(xiàn),知道我發(fā)現(xiàn)了個案例:
我想要在渲染出來了個列表數(shù)據(jù)之后,在最后面的一個button標(biāo)簽綁定一些操作,比如我點擊這個button,這一行數(shù)據(jù)就會刪除。
然而,我是循環(huán)渲染出來來了10行數(shù)據(jù),當(dāng)我點擊第6行的時候,我又怎么知道我點的是第幾行?總不能給某個元素寫上自己第幾行?
那么這時候自定義的數(shù)據(jù)就有用了,你渲染的時候直接寫在html標(biāo)簽里面,不如叫做data-line-num="i",那么當(dāng)我點擊這個按鈕,就判斷這個按鈕的這個屬性等于多少,就知道我要刪除i為幾的數(shù)據(jù)了,然后后面把所有數(shù)據(jù)第i個刪了,再重新渲染就好了。

個人案例:

為什么我要了解這個,因為我有那樣的需求的時候不知道改怎么做,就去綁定了id為i,然而我自己也知道這是絕對不對的,id這樣的全局參數(shù),不好自定義,也容易污染,然后咨詢了周圍的大牛,才終于理解了這個自定義屬性的作用。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容