设置/获取动态自定义属性

Question

主要的现代浏览器支持动态设置/检索自定义属性，IE 系列除外。如何在所有浏览器中设置/获取自定义属性？

这是我到目前为止所尝试过的：

HTML:

<input id="myInput" type="text" />

JS:

var myInput = document.getElementById('myInput');
myInput.setAttribute('custom-attr', 'custom-value');
alert(myInput.getAttribute('custom-attr'));

or

var myInput = document.getElementById('myInput');
var customAttr = document.createAttribute('custom-attr');
customAttr.value = 'custom-value';
myInput.setAttributeNode(customAttr);
alert(myInput.getAttribute('custom-attr'));

在这两种情况下 IE alert() 返回 null。

Answer 1

我在 IE7/8 上测试了你的代码

var myInput = document.getElementById('myInput');
myInput.setAttribute('custom-attr', 'custom-value');
alert(myInput.getAttribute('custom-attr'));

，运行良好。这个简单的测试用例对您来说是否失败了，或者您实际上正在做一些不同的事情？

您可以使用括号表示法

var myInput = document.getElementById('myInput');
myInput['custom-attr'] = 'custom-value';
alert(myInput['custom-attr']);

如果名称中没有 -，则可以使用点表示法

var myInput = document.getElementById('myInput');
myInput.customAttr = 'custom-value';
alert(myInput.customAttr);

Answer 2

您的代码在 IE6、IE7、IE8、FF、Chrome、Opera 上运行良好。