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

set/get dynamically custom attribute

本文关键字：自定义属性 动态 获取 设置      更新时间：2023-09-26

除了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

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

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

相关文章：