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动态创建的属性不会有这个问题。