常用跨浏览器javascript几例

wqyang

根据众浏览器的特点，从《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");}

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