HTML5的data-* 要注意的问题

判定自定义属性的使用，网上有很多相关的介绍，主要点有两个：

1、如何判定浏览器是否支持此属性

2、如何兼容各浏览器

 

首先第一个问题，比较简单，直接使用dom.dataset，如果“===”undefined则不支持

如何在设置自定义数据属性时，兼容各浏览器的操作。我在写测试例子的过程时，发现一些问题（与属性的命令有关）：

HTML的测试代码如下：

));
}
</script>

 </body>
</html>

测试所使用的浏览器：Chrome ver11.0.686.71

说说问题：

1、data-其后的属性名命名，发现如果为大写字母，则会转为 “-” + “小写字母”，如：

DOM.dataset.newAttrHaha 将会转换为属性“data-new-attr-haha”

2、data-其后的属性名命名，如果包含“-”紧接其后则不能为字母，可以为数字。如：DOM.dataset[‘newAttr-23aaa’]正确(转换方式按规则1处理)

DOM.dataset[‘newAttr-a23aaa’]则会报语法错误：

 

3、使用setAttribute定义的属性，如果中间包含”-”，转换规则有所不同，中间所有大写字母均转换为小写之母

DOM.setAttribute("data-newAttr2-abc", "22222") ==>  data-newattr2-abc=”2222”，获取它可以使用getAttribute(‘设定时的名称’)

DOM.getAttribute(“data-newAttr2-abc”)或是DOM.dataset.newattr2Abc获取。规则（1）中 “大写” ==》“-” + “小写”，在这里刚好获取则刚好相反 “-” + “小写”==》“大写”

如果是“-”+ “数字”，则保持原样不变

 

综上所述，在使用自定义属性时兼容各浏览器时，需要注意：

1、设置属性时尽量使用setAttribute(“data-xxx”)，其中属性命名最好不要有大写的出现，避免出现“-”，推荐使用“char_char”，如：“favo_obj_id”

2、获取属性时，推荐使用dataset[‘attrName’] || getAttribute(‘data-attrName’)