大魔 I'm Png

" Scientists ask why, engineers ask why not? "

document.createElement创建的<button>的type属性为只读

document.createElement创建的<button>,即使不追加到DOM树中,在IE中也不能修改其type属性和button属性,其他浏览器设置也可能不生效。

测试代码

测试代码中避开了type的默认值,因为<button>的type属性在IE下的默认值是button,而在其他浏览器默认是submit 。我们平时在使用时,建议显式的声明type属性。

Always specify the type attribute for the button. The default type for Internet Explorer is “button”, while in other browsers (and in the W3C specification) it is “submit”.

// 创建input
var iptEl = document.createElement('input');
iptEl.type = 'password';  // 避免默认值
iptEl.name = 'damon';

document.body.appendChild(iptEl);

// 创建button
var btnEl = document.createElement('button');
btnEl.type = 'reset';  // IE下这里报错了
btnEl.name = 'damon';

document.body.appendChild(btnEl);

alert(document.getElementsByTagName('input')[0].type +','+
    document.getElementsByTagName('button')[0].type);

测试结果

各浏览器对document.createElement元素的type属性修改的测试
浏览器 <input> <button>
IE 6 Yes No
IE 7 Yes No
IE 8 Yes No
IE 9 Yes Yes
Firefox 4.0 Yes Yes
Chrome 13(DEV) Yes No
Safari 5 Yes No
Opera 11 Yes Yes

从测试结果可以看到,<input>并无此问题。

解决方案

MSDN有一段说明:

As of Microsoft Internet Explorer 5, the type property is read/write-once, but only when an input element is created with the createElement method and before it is added to the document.

即只有document.createElement创建的input元素,在其增加到DOM树之前允许对type属性进行一次更改。但从实际情况来看并非如此,这个仅有的一次设置type的机会在创建时就用掉了。从上面的测试结果看,这个问题直到IE9才修复。

针对IE,document.createElement(tag)中,tag可以是带有属性的字符串,创建时即将type和name写上即可

Attributes can be included with the sTag as long as the entire string is valid HTML.

对其他的现代浏览器(Chrome、Safari等)使用setAttribute即可,或者使用document.createAttribute创建属性节点,再通过setAttributeNode加到元素节点上。

方法一:

var btnEl;

try {
    btnEl = document.createElement('');
} catch(e){}

if(! btnEl) {
    btnEl = document.createElement('button');

    btnEl.setAttribute('type', 'reset');
    btnEl.setAttribute('name', 'damon');
}

document.body.appendChild(btnEl);
alert(document.getElementsByTagName('button')[0].type +','+
    document.getElementsByTagName('button')[0].name);

方法二:

var btnEl;

try {
    btnEl = document.createElement('');
} catch(e){}

if(! btnEl) {
    btnEl = document.createElement('button');

    var aType = document.createAttribute('type');
    var aName = document.createAttribute('name');

    aType.value = 'reset';
    aName.value = 'damon';

    btnEl.setAttributeNode(aType);
    btnEl.setAttributeNode(aName);
}

document.body.appendChild(btnEl);
alert(document.getElementsByTagName('button')[0].type +','+
    document.getElementsByTagName('button')[0].name);

类别: Web开发

Tags: document.createElement

damon pang

大魔

Damo

i#impng.com

专注Web开发,爱电影,爱One Piece.