首页 > 编程笔记 > JavaScript笔记
阅读:25
JS dataset:获取HTML元素的自定义属性
HTML 5 允许用户为元素自定义属性,但要求添加 data- 前缀,目的是为元素提供与渲染无关的附加信息,或者提供语义信息。例如:
浏览器支持状态:Firefox 6+ 和 Chrome。
<div id="box" data-myid="12345" data-myname="zhangsan" data-mypass="zhang123">自定义数据属性</div>添加自定义属性之后,在 JavaScript 中可以通过元素的 dataset 属性访问自定义属性。dataset 属性的值是一个 DOMStringMap 实例,也就是一个名值对的映射。在这个映射中,每个 data-name 形式的属性都会有一个对应的属性,只不过属性名没有 data- 前缀。
浏览器支持状态:Firefox 6+ 和 Chrome。
示例
下面代码演示了如何自定义属性,以及如何读取这些附加信息。var div = document.getElementById("box"); //访问自定义属性值 var id = div.dataset.myid; var name = div.dataset.myname; var pass = div.dataset.mypass; //重置自定义属性值 div.dataset.myid = "66666"; div.dataset.myname = "zhangsan"; div.dataset.mypass = "zhangsan666"; //检测自定义属性 if (div.dataset.myname) { console.log(div.dataset.myname); }虽然上述用法未获得所有浏览器支持,但是我们仍然可以使用这种方式为元素添加自定义属性,然后使用 getAttribute() 方法读取元素附加的信息。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频