很多情况下,我们常常通过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动态创建的属性不会有这个问题。