Dom模型之dataset属性/Html元素标签的data-*属性
来源:互联网 发布:网络层次结构 编辑:程序博客网 时间:2024/05/16 10:05
dataset属性
有时,需要在HTML元素上附加数据,供JavaScript脚本使用。一种解决方法是自定义属性。
<div id="mydiv" foo="bar">
上面代码为div
元素自定义了foo
属性,然后可以用getAttribute()
和setAttribute()
读写这个属性。
var n = document.getElementById('mydiv');n.getAttribute('foo') // barn.setAttribute('foo', 'baz')
这种方法虽然可以达到目的,但是会使得HTML元素的属性不符合标准,导致网页的HTML代码通不过校验。
更好的解决方法是,使用标准提供的data-*
属性。
<div id="mydiv" data-foo="bar">
然后,使用元素节点对象的dataset
属性,它指向一个对象,可以用来操作HTML元素标签的data-*
属性。
var n = document.getElementById('mydiv');n.dataset.foo // barn.dataset.foo = 'baz'
上面代码中,通过dataset.foo
读写data-foo
属性。
删除一个data-*
属性,可以直接使用delete
命令。
delete document.getElementById('myDiv').dataset.foo;
除了dataset
属性,也可以用getAttribute('data-foo')
、removeAttribute('data-foo')
、setAttribute('data-foo')
、hasAttribute('data-foo')
等方法操作data-*
属性。
注意,data-
后面的属性名有限制,只能包含字母、数字、连词线(-
)、点(.
)、冒号(:
)和下划线(_
)。而且,属性名不应该使用A
到Z
的大写字母,比如不能有data-helloWorld
这样的属性名,而要写成data-hello-world
。
转成dataset
的键名时,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。反过来,dataset
的键名转成属性名时,所有大写字母都会被转成连词线+该字母的小写形式,其他字符不变。比如,dataset.helloWorld
会转成data-hello-world
。
- Dom模型之dataset属性/Html元素标签的data-*属性
- javascript之DOM编程通过html元素的标签属性找节点
- HTML的元素、标签、属性
- HTML标签/元素/属性
- Dom 通过html元素的标签属性找节点 通过关系找标签
- DOM对象的dataset属性
- HTML元素、标签、属性的区别
- HTML标签元素属性的概念
- HTML DOM之属性的各种操作方法
- 给html元素的onclick事件传递参数(即如何获取html标签的data-*属性&直接传参方法)
- JS-DOM模型中元素的位置、尺寸属性
- DOM取元素的属性
- DOM-元素的属性,样式
- HTML之Label标签的for属性
- HTML5 [data-]属性——使用HTML标签的data属性初始化JS组件
- html 当中相关标签,元素,属性的缩写
- JavaScript中的通过html元素的标签属性找节点
- HTML属性与DOM属性的区别
- Shell编写进度条
- B
- JDBC概述(持久化/版本的介绍)
- HDU 4135 Co-prime(容斥原理)
- windows下保存git用户名和密码
- Dom模型之dataset属性/Html元素标签的data-*属性
- 关于安卓 模块内的manifest文件使用占位符的思考
- CodeForces 287 D.Shifting(机智)
- fedora重新build rpm软件安装包
- 刚哥遇到了感情问题
- 将json转换为jsonp格式
- 【笔记】正则表达式中/g的含义
- 线程池的原理及实现(1)
- 文章标题 HDU 3530 : Subsequence(单调队列)