Author: Sealyu 2010-6-10
这两天在处理浏览器兼容的时候碰到很多问题,特别是在重新命名checkbox的时候,在IE和Safari中都碰到一些怪异的问题。
- IE中不能在运行时重命名元素。
按照微软的解释,运行时是无法重命名的:
After some digging, I found an
explanation in the
MSDN
DHTML
reference, on the page describing the
NAME
Attribute.
The NAME attribute cannot be set at run time on elements
dynamically created with the createElement method. To create an element
with a name attribute, include the attribute and value when using the
createElement method.
后来找到国外的一篇帖子,找到一个解决方法,那就是使用mergeAttributes 方法,模拟新建一个只有name不同的元素,并和之前的元素合并,这样就能达到重命名的效果了。代码如下:
var setElementName = function(el, newName) {
el = (typeof el === "string") ? document.getElementById(el) : el;
el.name = newName;
if(/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { // Internet Explorer test
el.mergeAttributes(document.createElement("<INPUT name='" + newName + "'/>"), false);
}
};
2. Safari中,如果用getElementsByName得到一个checkbox组,那么重命名的时
候,无法用for循环全部重命名
例如:
var checkBoxes = document.getElementsByName("testCheckbox");
var checkBoxesSize = checkBoxes.length;
for (var i = checkBoxesSize - 1; i >= 0; i--) {
if (checkBoxes[i] && !checkBoxes[i].checked) {
setElementName(checkBoxes[i],"testCheckbox-new");
}
}
这种情况在IE和Firefox下面都没有问题,全部的checkbox都会被成功的重命名。
但是在Safari下面,无法实现这个目的。经过调试发现,在Safari中,如果使用getElementsByName来得到这个checkbox组,那么在重命名的时候,如果使用for循环来依次进行,那么每重命名一个checkbox,safari将自动将这个元素从for循环中移除,这样这个循环在进行到一半的时候就会报错:checkBoxes[i][null]不是一个元素。
纠结了一段时间,本来打算想一个算法来解决这个问题,后来突然想到另外一个简单一点的方法:
使用getElementsByTagName方法来得到所有元素,并从中筛选出对应的checkbox,如果符合条件,再重命名。这种情况下,因为使用的tag类型来获得的数组,所以在for循环中,在重命名checkbox后,safari就不会自动的移除对应的元素。具体代码如下:
var elementlist = document.getElementsByTagName("input");
var elementSize = elementlist.length;
for(var i=0; i<elementSize;i++){
var curElement = elementlist[i];
if(curElement.type =='checkbox' && curElement.name == 'testCheckbox' && !curElement.checked){
curElement.name='testCheckbox-new';
}
}