HTML 利用data自定義屬性進行傳值

2021-10-08 06:24:35 字數 776 閱讀 2128

data-* 屬性用於儲存私有頁面後應用的自定義資料,可以在所有的 html 元素中嵌入資料。

自定義的資料可以讓頁面擁有更好的互動體驗(不需要使用 ajax 或去服務端查詢資料)。

data-* 屬性由以下兩部分組成:

屬性名不要包含大寫字母,在 data- 後必須至少有乙個字元。

該屬性可以是任何字串

注意:自定義屬性字首 "data-" 會被客戶端忽略。

語法:為乙個元素分配data屬性儲存資料

在js中設定和獲取

var open = document.getelementsbyclassname('open');

open.dataset.id = '1';//設定

open.onclick = function ()

在jq中設定和獲取

$('.open').click(function () )
在jq中設定也可以把乙個包含鍵/值對的物件,向被選元素新增資料 (在元素data-*屬性中設定json資料時,需要注意單雙引號,否則可能出現undefined的,獲取不到資料,正確的做法是用雙引號。)

dom.data('setobj', json.stringify())
取的時候,只需要

var obj = dom.data('setobj')

自定義屬性 data

在html5中新增了data 的方式來自定義屬性,所謂data 實際上上就是data 字首加上自定義的屬性名,使用這樣的結構可以進行資料存放。使用data 可以解決自定義屬性混亂無管理的現狀。設定自定義屬性有如下2種方式。1 第一種方式是可以直接在 html 標籤上面書寫 h2 data weath...

HTML5自定義data屬性

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

html5 data 自定義屬性

在html5中我們可以通過data 來設定我們需要的自定義屬性,進行資料存放 root 之後可以通過js指令碼獲取 設定自定義屬性,也可以使用css屬性選擇器進行樣式設定 我們先建立乙個id為root的div元素,自定義屬性age值為25,然後我們對其自定義屬性進行操作 let root docum...