常用跨浏览器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");
}


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

你可能感兴趣的:(JavaScript,Ajax,浏览器,IE,Opera)