HTML5 のカスタム属性の概要

定義

H5 では、カスタム属性を設定するために必要な属性を定義するためのプレフィックスとして「data-」が提供されます。

<div id="box1" data-name="Musk"></div>
<div id="box2" data-full-name="Elon Musk"></div>

(推奨チュートリアル: H5 チュートリアル)

Get

H5 カスタム属性オブジェクト データセットを使用して取得

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
 
box1.dataset.name // Musk
box2.dataset.fullName // Elon Musk (驼峰)
 
box1.getAttribute('data-name') // Musk
box2.getAttribute('data-full-name') // Elon Musk

設定

let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
 
box1.dataset.name = '马斯克'
box2.setAttribute('data-full-name', '埃隆 马斯克')

推奨される関連ビデオ チュートリアル: html5 ビデオ チュートリアル

以上がHTML5 のカスタム属性の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。