首页 > 编程笔记 > JavaScript笔记
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() 方法读取元素附加的信息。
所有教程
- C语言入门
- C语言编译器
- C语言项目案例
- 数据结构
- C++
- STL
- C++11
- socket
- GCC
- GDB
- Makefile
- OpenCV
- Qt教程
- Unity 3D
- UE4
- 游戏引擎
- Python
- Python并发编程
- TensorFlow
- Django
- NumPy
- Linux
- Shell
- Java教程
- 设计模式
- Java Swing
- Servlet
- JSP教程
- Struts2
- Maven
- Spring
- Spring MVC
- Spring Boot
- Spring Cloud
- Hibernate
- Mybatis
- MySQL教程
- MySQL函数
- NoSQL
- Redis
- MongoDB
- HBase
- Go语言
- C#
- MATLAB
- JavaScript
- Bootstrap
- HTML
- CSS教程
- PHP
- 汇编语言
- TCP/IP
- vi命令
- Android教程
- 区块链
- Docker
- 大数据
- 云计算