Home > Web Front-end > H5 Tutorial > body text

Introduction to custom attributes in html5

王林
Release: 2020-03-21 17:54:24
forward
2734 people have browsed it

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>
Copy after login

(Recommended tutorial: H5 tutorial)

Get

Use H5 custom attribute object dataset to get

let box1 = document.getElementById(&#39;box1&#39;);
let box2 = document.getElementById(&#39;box2&#39;);
 
box1.dataset.name // Musk
box2.dataset.fullName // Elon Musk (驼峰)
 
box1.getAttribute(&#39;data-name&#39;) // Musk
box2.getAttribute(&#39;data-full-name&#39;) // Elon Musk
Copy after login

Settings

let box1 = document.getElementById(&#39;box1&#39;);
let box2 = document.getElementById(&#39;box2&#39;);
 
box1.dataset.name = &#39;马斯克&#39;
box2.setAttribute(&#39;data-full-name&#39;, &#39;埃隆 马斯克&#39;)
Copy after login

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!

Related labels:
source:jb51.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template