一文解析HTML5自定义属性

开课吧开课吧锤锤2021-07-29 12:03

HTML5规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以data-开头即可,来看一个例子。  

一文解析HTML5自定义属性

<div id=“myDiv” data-appId=“12345” data-myname=“Nicholas”></div>

添加了自定义属性之后,可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例,也就是一个名值对儿的映射。  

在这个映射中,每个data-name形式的属性都会有一个对应的属性,只不过属性名没有data-前缀(比如,自定义属性是data-myname,那映射中对应的属性就是myname),还是看一个例子吧。  

var div = document.getElementById(“myDiv”);

//取得自定义属性的值

var appId = div.dataset.appId;

var myName = div.dataset.myname;

//设置值

div.dataset.appId = 23456;

div.dataset.myname = “Michael”;

如果需要给元素添加一些不可见的数据以便进行其他处理,那就要用到自定义数据属性。  

以上就是开课吧广场小编为大家整理发布的“一文解析HTML5自定义属性”一文,更多Web教程相关信息尽在开课吧Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享