HTML5 标签自定义属性规范 dataset

当我们在HTML 中获取元素的属性值, 或者给某个元素设置属性值时通常有2种情景:

情景1:
获取和设置的都是HTML标签系统自带的属性, eg: class id 属性.

<div id="nav" class="search"> <div>

情景2:
获取和设置的是程序员自定义的HTML 属性.eg: age sex属性

<div age="18" sex="男"> </div>

我们通常的做法:

HTML 自带的属性, 可以使用点语法或者 getAttribute() setAttribute() 来读取或者设置.
程序员自定义的属性, 只能使用 getAttribute() 和 setAttribute() 方法来操作

H5 自定义属性规范要求

在H5之前,通常我们在对HTML元素的属性进行操作时, 都有一个选择困难症, 我们根本没有判断某个属性究竟是系统自带属性还是程序员自己定义的属性, H5 之后我们在开发HTML网页时都有一个大家的约定, 如果是程序员自定义的属性, 属性名全部以 data- 打头.即, 比如: 我想自己定义一个名为age的属性, 那么这个属性的名字应该为: data-age , 这样, 大家以后看到属性是 data-打头的就知道这个属性是自定义属性, 需要使用 getAttribute() 和 setAttribute() 来操作.

H5 新增获取设置自定义HTML属性的方法

<div data-age="18" data-sex="男"> </div>


在js 中我们就可以这样做了
var  div = document.querySelector('div');


var age = div.dataset.age; // 获取 data-age 属性对应的属性值
等价于 div.getAttribure('data-age');


div.dataset.age = 30; // 给 data-age 属性值修改为 30
等价于 div.setAttribute('data-age', 30);


其实, 当我们把自定义属性以 'data-' 开头命名后, 系统会把所有的以 `data-` 打头的 自定义属性装进一个 key-value 的一个json 对象中
比如: 
{age:"18", sex:"男''}

自定义属性名的注意事项:

当自定义的名称中 出现中划线后,如下:
<div data-list-name ="张三"> </div>

此后, 我们不能使用 div.list-name 来获取属性 `data-list-name` 的值, 而要使用驼峰命名来获取,如下: 
var name = div.listName ;

其实, 想要使用H5 新增的操作自定义属性的方法很简单, 当我们把自定义属性以 data- 打头规范命名后, 只需要 `console.log(div.dataset) 即可明白.

<div class="test" data-age="18" data-sex="男" data-my-age="34" data-my_kid="小样"></div>

console.log(div.dataset) ; 结果如下: 
{age: "18", sex: "男", myAge: "34", my_kid: "小样"}

注意:
dataset.属性名这种H5新增的方式, 只有在IE11 上才能用, 有兼容性问题

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

HTML5 标签自定义属性规范 dataset