根据众浏览器的特点,从《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时要注意的问题开发跨浏览器JavaScript时要注意的问题
javascript 编写跨浏览器的javascript兼容写法 js兼容
跨浏览器,javascript万能时间日期组件.绝对好用绝对跨浏览器。演示可参考说明中的网址。
javascript判断跨浏览器网页编程。
如何编写跨浏览器的javascript程序
EasyQRCodeJS是一款功能丰富的跨浏览器的纯 JavaScript QRCode 生成库。支持 JavaScript 模块化加载。支持点状风格,Logo,背景图片,规则色彩控制,标题等设置。
push.js:一个小巧的,跨浏览器的 JavaScript 通知 API 的解决方案
Javascript Debug Toolkit(JSDT) 是一款免费绿色免安装的javascript调试工具,JSDT可以在任何支持ajax的浏览器上调试javascript,譬如: IE6 IE7, IE8, Firefox1.5, Firefox2, Firefox3, Safari, Chrome, Opera, 和...
javascript获取浏览器临时目录javascript获取浏览器临时目录javascript获取浏览器临时目录javascript获取浏览器临时目录
javascript跨浏览器的属性判断方法.docx
Zero Clipboard一个比较成熟的跨浏览器兼容的“复制到剪切板”功能库,需要放在项目里使用
常用JavaScript300例,非常实用。js常用的20个类型,300多个例子
用于 v4.0 浏览器的跨浏览器 Javascript 库。 v0.3b - 2000 年 8 月 关于 ASMLIB 于 2000 年为网站编写。 该库包含非常简单的动画函数,适用于当时所有 v4.0+ 浏览器(Netscape 4、IE 4、Mozilla)。 ASMLIB 是第一...
跨浏览器Javascript视口感知 小型图书馆旨在在所有浏览器中提供Javascript视口感知功能,以防那些不符合标准的浏览器,这些浏览器本身不支持CSS媒体查询。 无依赖性 适用于所有A级浏览器,但并非跨A级浏览器运行...
各主流浏览器如何禁用javascript脚本
简单的跨浏览器JavaScript XSLT插件 它有什么作用? 在所有浏览器中使用JavaScript呈现XSLT转换后的XML既烦人又不必要。 Magic XML简化了此功能的跨浏览器实现。 通过使用属性装饰元素,Magic XML还可以自动为您...
这是一个JavaScript获取浏览器参数的方法,
• 多浏览器兼容, 包括IE6+, firefox1.5+, opera9+, safari3+ 和 Google Chrome. • 大量的API文档 和示例. • 不断更新的代码片段供程序员参考. • 极为方便的所见即所得的界面编辑器. Web界面使用拖拽轻松搞定,...
jWalker对提供了类的经过测试的跨浏览器JavaScript实现。 尝试使用TreeWalkers时,这消除了Internet Explorer浏览器留下的间隙,该间隙小于IE9(以及在IE7 / IE8兼容模式下使用的IE9)。 它还解决了一个已得到但在...
主要介绍了JavaScript的跨浏览器事件处理,以全浏览器兼容为大致目标,需要的朋友可以参考下