過完聖誕節,接著準備過年。預祝各位讀者:新年快樂!
HTML 元素可以透過 dataset 傳遞資料給 JavaScript 處理,這些屬性會以 data-<keyname>="<value>"
宣告。這篇文章針對 dataset 部分,來做個小小實驗。
取值
宣告一個 <p> 元素作為範例,宣告了幾個 dataset 屬性,接著使用 JavaScript 取得元素:
<p id="data"
data-demo="測試"
data-today="今天"
data-good-day="好天氣"
data-newYear="2024">這是一個 p 元素</p>
<script>
const pElement = document.getElementById('data')
console.log(pElement.dataset)
</script>
得到以下結果:
DOMStringMap {demo: '測試', today: '今天', goodDay: '好天氣', newyear: '2024'}
Dataset 屬性會把 data- 後面的字串做為 keyname 。以結果來看, keyname 建議使用烤肉串(Kebab case)方式命名,轉換到 JavaScript 後才會是正確的小駝峰(lower camel case)。
賦值
如果先宣告元素,再透過 JavaScript 賦予 dataset 屬性,首先是基本賦值:
<p id="data" data-year="年分" data-today="今天">這是一個 p 元素</p>
<script>
// 取得元素
const pElement = document.getElementById('data')
// 更新值
pElement.dataset.year = '2023'
pElement.dataset['today'] = '20231227'
// 賦予 dataset 屬性與值
pElement.dataset.demo = 'value'
pElement.dataset['test'] = 'value'
console.log(pElement)
</script>
從結果得知,賦值與更新沒有問題:
<p id="data" data-year="2023" data-today="20231227" data-demo="value" data-test="value">這是一個 p 元素</p>
命名方式
那麼,命名方式呢?
<p id="data">這是一個 p 元素</p>
<script>
// 取得元素
const pElement = document.getElementById('data')
// // 小駝峰與烤肉串
pElement.dataset.lowerCamelCase = '小駝峰'
pElement.dataset.UpperCamelCase = '大駝峰'
// pElement.dataset['with space'] = '空格' // 錯誤
// pElement.dataset['kebab-case'] = '烤肉串' // 錯誤
console.log(pElement)
</script>
其中,駝峰式命名可以被正確轉換:
<p id="data" data-lower-camel-case="小駝峰" data--upper-camel-case="大駝峰">這是一個 p 元素</p>
那麼,蛇型呢?
<p id="data">這是一個 p 元素</p>
<script>
// 取得元素
const pElement = document.getElementById('data')
// // 小駝峰與烤肉串
pElement.dataset.snake_case_1 = '蛇形'
pElement.dataset['snake_case_2'] = '蛇形'
console.log(pElement)
</script>
一樣沒有問題!
<p id="data" data-snake_case_1="蛇形" data-snake_case_2="蛇形">這是一個 p 元素</p>
結論
HTML 可以透過 dataset 屬性傳遞自訂資料給 JavaScript 進行處理,使用烤肉串命名法會轉換成小駝峰到 JavaScript 中。
若從 JavaScript 產生 dataset 屬性,符合 JavaScript 變數命名方式便可正確賦予。
給予回饋