HTML5新特性 自定義資料屬性data

2021-07-08 22:31:42 字數 939 閱讀 6502

html是允許我們自定義標籤和屬性的,我們一般經常用自定義屬性在介面儲存一些資料,類似於使用hidden控制項。

可以看到我們能夠像操作html內建屬性(name)一樣,操作我們自定義的屬性(age)。

一些常見的前端框架比如angularjs使用了很多自定義的標籤和屬性,比如ng-model,ng-repeat等。這種自定義屬性的方式沒有標準,使用也很隨意,容易導致混亂和衝突。html5規範裡增加了乙個自定義data屬性.自定義data屬性的用法非常的簡單, 就是你可以往html標籤上新增任意以 "data-"開頭的屬性, 這些屬性頁面上是不顯示的,它不會影響到你的頁面布局和風格,但它卻是可讀可寫的。

比如下面這段html中,我們使用data-*自定義屬性。

自定義屬性的讀取和設定操作方式如下:

window.onload = function()
最後生成的dom如下圖:

使用html5中自定義屬性的幾點總結:

1.自定義屬性名稱不要使用大寫字母、連字元等特殊符號。上面我們看到連字元會被轉換成駝峰式。我們就用:小寫字母和下劃線就好了,比如his_lover這種命名方式,既簡單易讀也不會有特殊字元的影響。

2.js中如果要獲取或者設定自定義屬性的值,需要去掉data-這個固定字首。

3.如果修改了自定義屬性的值,會導致html中dom的重新整理。這一點很好理解,這裡提一下是因為後面我們會使用jquery來操作自定義屬性,但是jquery不會重新整理dom。

HTML5自定義屬性

你可以去讀一下html5的詳細規範,但這個自定義data屬性的用法非常的簡單,就是你可以往html標籤上新增任意以 data 開頭的屬性,這些屬性頁面上是不顯示的,它不會影響到你的頁面布局和風格,但它卻是可讀可寫的。下面的乙個 片段是乙個有效的html5標記 some awesome data 可是...

HTML5自定義屬性

自定義屬性的出現並非始於html5,但html5將 data 真正合法化。data自定義屬性如何操作?有何用途?首先給定一段html this is a div elem this is a div elem,too 注意 1.自定義屬性用來儲存或運算元據,可讀可寫,但不會在頁面顯示 2.屬性值可以...

HTML5自定義data屬性

可能大家在使用jquery mobile時,經常會看到data role data theme等的使用,比如 通過如下 即可實現頁首的效果 通過手機瀏覽,效果如下 為什麼寫乙個data role header 就能實現底部為黑色 文字居中顯示的效果呢?我們寫乙個html頁面,自定義乙個data ch...