Rumah  >  Artikel  >  hujung hadapan web  >  关于html5中自定义属性的介绍

关于html5中自定义属性的介绍

王林
王林ke hadapan
2020-03-21 17:54:242712semak imbas

关于html5中自定义属性的介绍

定义

H5为我们提供了以 "data-" 为前缀定义需要的属性即可设置自定义属性。

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

(推荐教程:H5教程

获取

使用H5自定义属性对象dataset来获取

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

设置

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;)

相关视频教程推荐:html5视频教程

Atas ialah kandungan terperinci 关于html5中自定义属性的介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya:前端安全以及如何防范详细介绍Artikel seterusnya:什么是h5页面