html5 data 不兼容,HTML5的data-* 要注意的问题

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

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

2、如何兼容各浏览器

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

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

HTML的测试代码如下：

data自定义属性

#test {

padding: 10px;

border: 1px solid #ccc;

margin: 20px 0;

}

pre {

overflow-x: auto;

padding: 10px;

border: 1px dashed #ccc;

background: #fff;

font-size: 12px;

}

#status {

padding: 5px;

color: #fff;

background: #ccc;

}

#status.fail {

background: #c00;

}

#status.success {

background: #0c0;

}

#wrapper {width:620px; margin:0 auto;}

This element has data

getData

setData

hasData

var state = document.getElementById('status'),

code = document.getElementById('code'),

test = document.getElementById('test');

function show() {

code.innerHTML = test.outerHTML.replace(/[<>]/g, function (m) {

return { '': '>' }[m];

});

for (var prop in test.dataset) {

code.innerHTML += '\nel.dataset.' + prop + ' = "' + test.dataset[prop] + '"';

}

}

if (test.dataset === undefined) {

state.innerHTML = 'dataset not supported';

state.className = 'fail';

} else {

state.className = 'success';

state.innerHTML = 'element.dataset supported';

}

function getHandler() {

show();

}

function setHandler() {

test.dataset.newAttr = '11111';

test.setAttribute("data-newAttr2", "22222");

test.dataset['newAttr3'] = '333';

show();

}

function hasHandler() {

alert('newAttr：' + test.dataset.newAttr + '\n newAttr2：' + test.dataset.newAttr2 + '\n newAttr3：' + test.dataset.newAttr3);

alert('newAttr：' + (test.hasAttribute('data-newAttr') ? "1" : "0"));

alert('newAttr2：' + (test.hasAttribute("data-newAttr2") ? "1" : "0"));

alert('newAttr3：' + (test.hasAttribute("data-newAttr3") ? "1" : "0"));

}

测试所使用的浏览器：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’)