javascript/js对html元素自定义属性的操作(兼容Firefox和IE) .

很多情况下，我们常常通过javascript对HTML元素的属性进行操作，如获取或设置以下html代码块中input元素的value;

1	<input id="input_btn" type="button" value="kanqd.com" />

我们常常会写以下的代码：

1 2	var inputObj = document.getElementById('input_btn'); alert(inputObj.value);

如我们所想的一样，页面上弹出kanqd.com.

问题: 在一些应用产景中，我们需要对html元素的添加一些自定义属性以满足应用，比如，对给以上input标记加一个info属性，代码如下：

1	<input id="input_btn" type="button" value="kanqd.com" info="this is a self defined attribute" />;

如果我们还是以同样的代码进行操作：

1 2	var inputObj = document.getElementById('input_btn'); alert(inputObj.info);

执行后会发现，在IE中弹出”this is a self defined attribute” , 但在firefox中它就出错了，原因是IE自动将自定义属性解析到了DOM中，和标准属性没有任何区别，但FireFox对自定义属性的使用，限制更高.

兼容方法如下：

1、用元素attributes[]集合来访问:

1 2 3 4

var inputObj = document.getElementById('input_btn'); alert(inputObj.attributes['info'].nodeValue); inputObj.attributes['info'].nodeValue = 'this is a new info'; alert(inputObj.attributes['info'].nodeValue);

2、用getAttribute 和 setAttribute对其进行操作:

1 2 3 4

var inputObj = document.getElementById('input_btn'); alert(inputObj. getAttribute('info')); inputObj.setAttribute('info','this is a new info'); alert(inputObj. getAttribute('info'));

^_^：

注意：这里所说的自定义属性是特指在html页面中定义的元素属性，用javascript动态创建的属性不会有这个问题。