Author: Sealyu  2010-6-10

这两天在处理浏览器兼容的时候碰到很多问题,特别是在重新命名checkbox的时候,在IE和Safari中都碰到一些怪异的问题。<br />

  1. IE中不能在运行时重命名元素。</li>

     按照微软的解释,运行时是无法重命名的:<br />
     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.

后来找到国外的一篇帖子,找到一个解决方法,那就是使用<a title=”MSDN mergeAttributes Documentation” href=”http://msdn.microsoft.com/en-us/library/ms536614%28VS.85%29.aspx”>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循环全部重命名&lt;br />
例如:&lt;br />

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都会被成功的重命名。&lt;br />
但是在Safari下面,无法实现这个目的。经过调试发现,在Safari中,如果使用getElementsByName来得到这个checkbox组,那么在重命名的时候,如果使用for循环来依次进行,那么每重命名一个checkbox,safari将自动将这个元素从for循环中移除,这样这个循环在进行到一半的时候就会报错:checkBoxes[i][null]不是一个元素。&lt;br />
纠结了一段时间,本来打算想一个算法来解决这个问题,后来突然想到另外一个简单一点的方法:&lt;br />
使用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
=‘testCheckboxnew‘;
            }
        }

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注