HTML5新特性：自定义数据属性data-
2018-07-03 本文已影响0人
你为什么无理取闹
html是允许我们自定义标签和属性的，我们一般经常用自定义属性在界面存储一些数据，类似于使用Hidden控件。
window.onload = function(){
console.log($("#test1").attr("name"));
console.log(document.getElementById("test2").getAttribute("name"));
$("#test1").attr("age",25);
document.getElementById("test2").setAttribute("age",25);
}
</script>
<body>
<div id="test1" name="aty" age="26"></div>
<div id="test2" name="aty" age="26"></div>
</body>
可以看到我们能够像操作html内置属性(name)一样，操作我们自定义的属性(age)。
image
一些常见的前端框架比如angularJS使用了很多自定义的标签和属性，比如ng-model，ng-repeat等。这种自定义属性的方式没有标准，使用也很随意，容易导致混乱和冲突。HTML5规范里增加了一个自定义data属性.自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
比如下面这段html中，我们使用data-*自定义属性。
<div id="a" data-name="a" data-hobby_list="swim" data-config-options='{"type":"a"}'>
</div>
自定义属性的读取和设置操作方式如下：
var element = document.getElementById("a");
console.log(element.dataset.name);
console.log(element.dataset.hobby_list);
// html里面的连字符转换成驼峰式
console.log(element.dataset.configOptions);
element.dataset.name = "update";
element.dataset.non_exsit = "oo";
// 驼峰式转换成html里面的连字符
element.dataset.hisLover = "xx";
}
最后生成的dom如下图：
image
使用HTML5中自定义属性的几点总结：
1.自定义属性名称不要使用大写字母、连字符等特殊符号。上面我们看到连字符会被转换成驼峰式。我们就用：小写字母和下划线就好了，比如his_lover这种命名方式，既简单易读也不会有特殊字符的影响。
2.js中如果要获取或者设置自定义属性的值，需要去掉data-这个固定前缀。
3.如果修改了自定义属性的值，会导致HTML中dom的刷新。这一点很好理解，这里提一下是因为后面我们会使用jQuery来操作自定义属性，但是jquery不会刷新dom。
