首页 > 软件操作教程 > 编程开发 > JavaScript
题目内容

JavaScript 自定义属性

题目答案

■知识点

    HTML5允许用户为元素自定义属性,但要求添加data-前缀,目的是为元素提供与渲染无关的附加信息,或者提供语义信息。例如:

    <div id="box" data-myid="12345" data-myname="zhangsan" data-mypass="zhangl23"> 自定义数据属性</div>

    添加自定义属性后,可以通过元素的dataset属性访问自定义属性。dataset属性的值是一个DOMStringMap实例,也就是一个名值对的映射。在这个映射中,每个data-name形式的厲性都会有一个对应的属性,只不过属性名没有data-前缀。

    浏览器支持状态:Firefox 6+和Chrome。

■实例设计

下面的代码演示了如何自定义属性,以及如何读取这些附加信息。

var div = document.getElementByld("box");

//访问自定义属性值 

var id = div.dataset.myid; 

var name = div.dataset.myname; 

var pass = div.dataset.mypass;

//重置自定义属性值 

div.dataset.myid = "54321"; 

div.dataset.myname = "lisi";

div.dataset.mypass = "lisi543";

//检测自定义属性

if (div.dataset.myname){

    console.log(div.dataset.myname);

}

虽然上述用法未获得所有浏览器支持,但是仍然可以使用这种方式为元素添加自定义属性,然后使用getAttribute()方法读取元素附加的信息。

网友评论(共0条评论)

请自觉遵守互联网相关政策法规,评论内容只代表网友观点!

最新评论

点击加载更多评论>>

软件操作 新人注册送三重礼

已有 22658 名学员学习以下课程通过考试

相关视频试题

最需教育客户端 软件问题一手掌握

去 App Store 免费下载 iOS 客户端