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

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

1

<inputid="input_btn"type="button"value="kanqd.com"/>

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

1
2

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

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

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

1

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