Dom模型之dataset屬性/Html元素標籤的data-*屬性
阿新 • • 發佈:2018-11-01
dataset屬性
有時,需要在HTML元素上附加資料,供JavaScript指令碼使用。一種解決方法是自定義屬性。
<div id="mydiv" foo="bar">
上面程式碼為div
元素自定義了foo
屬性,然後可以用getAttribute()
和setAttribute()
讀寫這個屬性。
var n = document.getElementById('mydiv');
n.getAttribute('foo') // bar
n.setAttribute('foo', 'baz')
這種方法雖然可以達到目的,但是會使得HTML元素的屬性不符合標準,導致網頁的HTML程式碼通不過校驗。
更好的解決方法是,使用標準提供的data-*
屬性。
<div id="mydiv" data-foo="bar">
然後,使用元素節點物件的dataset
屬性,它指向一個物件,可以用來操作HTML元素標籤的data-*
屬性。
var n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'
上面程式碼中,通過dataset.foo
讀寫data-foo
屬性。
刪除一個data-*
屬性,可以直接使用delete
命令。
delete document.getElementById('myDiv').dataset.foo;
除了dataset
屬性,也可以用getAttribute('data-foo')
、removeAttribute('data-foo')
、setAttribute('data-foo')
、hasAttribute('data-foo')
等方法操作data-*
屬性。
注意,data-
後面的屬性名有限制,只能包含字母、數字、連詞線(-
)、點(.
)、冒號(:
)和下劃線(_
)。而且,屬性名不應該使用A
到Z
的大寫字母,比如不能有data-helloWorld
這樣的屬性名,而要寫成data-hello-world
轉成dataset
的鍵名時,連詞線後面如果跟著一個小寫字母,那麼連詞線會被移除,該小寫字母轉為大寫字母,其他字元不變。反過來,dataset
的鍵名轉成屬性名時,所有大寫字母都會被轉成連詞線+該字母的小寫形式,其他字元不變。比如,dataset.helloWorld
會轉成data-hello-world
。