HTML5自定義data屬性

2021-06-11 18:36:31 字數 685 閱讀 2900

可能大家在使用jquery mobile時,經常會看到data-role、data-theme等的使用,比如:通過如下**即可實現頁首的效果:

通過手機瀏覽,效果如下:

為什麼寫乙個data-role="header"就能實現底部為黑色、文字居中顯示的效果呢?

我們寫乙個html頁面,自定義乙個data-chb="header"的屬性,希望具備這個屬性的div區域背景顏色為黑色,文字為白色,居中顯示;不具備data-chb自定義屬性的div按照預設方式顯示,html**如下:

我沒有使用data-chb自定義屬性,該怎麼展現就怎麼展現;

要想實現"背景顏色為黑色,文字為白色,居中顯示"的顯示效果,我們定義如下的css:

然後我們通過如下js方法實現在頁面載入時,動態新增css定義,改變具備data-chb屬性的div的顯示樣式:

最後頁面顯示效果如下:

html5的自定義data 屬性

html5中新增了data 的方式來自定義屬性,所謂data 實際上上就是data 字首加上自定義的屬性名,使用這樣的結構可以進行資料存放。使用data 可以解決自定義屬性混亂無管理的現狀。data 有兩種設定方式,可以直接在html元素標籤上書寫 click here 可是,怎麼來讀取這些資料呢?...

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

html是允許我們自定義標籤和屬性的,我們一般經常用自定義屬性在介面儲存一些資料,類似於使用hidden控制項。可以看到我們能夠像操作html內建屬性 name 一樣,操作我們自定義的屬性 age 一些常見的前端框架比如angularjs使用了很多自定義的標籤和屬性,比如ng model,ng re...

HTML5自定義屬性

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