常用跨浏览器javascript几例

根据众浏览器的特点，从《Foundations of Ajax》中总结几则跨浏览器的javascript代码如下：

1. 向表中追加行

为了写出通用的Javascript代码实现向表中追加行，必须将新增加的行append到tbody元素中（IE），而不能直接append到table元素。

<table id="myTable">
    <tbody id="myTableBody"></tbody>
</table>

var cell=document.createElement("td").appendChild(document.createTextNode("foo"));
var row=document.createElement("tr").appendChild(cell);
document.getElementById("myTableBody").appendChild(row);

以上代码可实现包括IE在内的所有浏览器兼容。

2. 通过javascript设置元素样式

除IE外可使用如下代码实现span内文字样式的改变：

var spanEle=document.getElementById("mySpan");
spanEle.setAttribute("style","font-weight:bold;color:red;");

但IE是个例外，必须使用点记法加cssText属性设置：

var spanEle=document.getElementById("mySpan");
spanEle.style.cssText="font-weight:bold;color:red;";

但这样又有人不高兴了，这个人叫Opera，所以要实现完全通用，就得双管齐下：

var spanEle=document.getElementById("mySpan");
spanEle.setAttribute("style","font-weight:bold;color:red;");
spanEle.style.cssText="font-weight:bold;color:red;";

哎，真是众口难调啊！

3. 设置元素的class属性：

2中提到使用style属性设置元素的内联样式，其实设置元素的class属性同样存在一些特异性，这个异类就是IE。没有办法，IE仍然占有相当大的市场，我们还得顾着它。且看代码：

非IE中使用class作为属性名：

var ele=document.getElementById("myElement");
ele.setAttribute("class","styleClass");

IE中非要用className，“我就个性，怎么着吧？”:

var ele=document.getElementById("myElement");
ele.setAttribute("className","styleClass");

通用办法，双管齐下：

var ele=document.getElementById("myElement");
ele.setAttribute("class","styleClass");
ele.setAttribute("className","styleClass");

4. 创建输入元素

这里强调的是创建子元素，设置子元素属性及将子元素追加到父元素的顺序，如不按这个顺序，某些浏览器可能会产生不同的效果。

var button=document.createElement("input");
button.setAttribute("type","button");
document.getElementById("myForm").appendChild(button);

5. 设置元素的事件处理程序

在非IE浏览器中，可以像设置元素属性一样设置元素的事件处理程序，如下所示：

var ele=document.getElementById("myElement");
ele.setAttribute("onclick","doFoo();");

但在IE中，必须使用点记法加匿名函数的方式：

var ele=document.getElementById("myElement");
ele.onclick=function(){doFoo();};

还好大家都很宽容，都支持这种点记法加匿名函数的方式，所以程序员只需要用这种方式就可以了。

5. 创建单选按钮

非IE中：

var radioButton=document.createElement("input");
radioButton.setAttribute("type","radio");
radioButton.setAttribute("name","radioButton");
radioButton.setAttribute("value","checked");

但这样优雅的代码在IE中却不能完全正常工作，体现在生成的按钮无法选中。
IE中的方法：

var radioButton=document.createElement("<input type='radio' name='radioButton' value='checked'>");

为了满足大多数人的需要，同时照顾少数人的利益，我们需要在这里做个判断，判断的基准是document下面一个叫uniqueID的属性，只有IE才能识别这个属性（怎么样，个性吧~）。那么代码就可以这样来写：

if(document.uniqueID){
    // Internet Explorer
    var radioButton=document.createElement("<input type='radio' name='radioButton' value='checked'>");
}
else {
    // Standard Compliant
    var radioButton=document.createElement("input");
    radioButton.setAttribute("type","radio");
    radioButton.setAttribute("name","radioButton");
    radioButton.setAttribute("value","checked");
}

好吧，我们现在就先记住这些特例吧，强烈期待浏览器世界的大团结！