Introduction to custom attributes in html5

Definition

H5 provides us with "data-" as the prefix to define the required attributes to set custom attributes. .

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

(Recommended tutorial: H5 tutorial)

Get

Use H5 custom attribute object dataset to get

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

Settings

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

Recommended related video tutorials: html5 video tutorial

The above is the detailed content of Introduction to custom attributes in html5. For more information, please follow other related articles on the PHP Chinese website!