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

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'));

或者

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。

- ritmas

---

我实际上并没有看到你第一段代码片段有什么问题。在MSIE 6.0和8.0中尝试，正确显示“custom-value”。 - Wladimir Palant

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);

- epascarello

---

那些实际上不是属性，它们是属性。 - lonesomeday

帮助在谷歌上查找更多信息的提示：这个功能被称为“展开属性”。 - Wladimir Palant

Answer 2

您的代码在IE6、IE7、IE8、FF、Chrome和Opera上都可以正常工作。

- Paktas