随着以Firefox为代表的第三方浏览器的兴起,我们做的网站也不能再JUST IE了,如果把原来的一些Javascript代码放到IE以外的浏览器的话,往往都不能正常运行或出错,所以这里介绍一下怎么改进我们的JS,让它能更加规范,更加具有兼容性。
示例代码:
<body><table border="1" cellspacing="0" cellpadding="0" id="apple" > <tbody>
<tr> <td id="banana" style="color:red" >不吃苹果</td> </tr>
</tbody></table></body>
尽量采用W3C DOM 的写法
以前访问对象可能是:
document.all.apple 或者 apple
现在应该采用:
document.getElementById("apple") 以ID来访问对象,且一个ID在页面中必须是唯一的
document.getElementsByTagName("div")[0] 以标签名来访问对象
原来设置对象的属性可能是:
document.all.apple.width=100 或 apple.width=100
现在应该采用:
document.getElementById("apple").setAttribute("width","100")
document.getElementsByTagName("div")[0].setAttribute("width","100")
访问对象的属性则采用:
document.getElementById("apple").getAttribute("width")
document.getElementsByTagName("div")[0].getAttribute("width")
W3C DOM在IE下的一些限制
因为起先的IE占据整个浏览器95%的份额,没有竞争压力,所以这位老大就硬是要玩点另类,不完全按WEB标准来搞。
在IE下不能正确使用setAttribute来设置对象的style、class以及事件响应属性,
因此我还得按原来的点记法来访问和设置,以达到兼容各种浏览器的效果,如:
document.getElementById("banana").class
document.getElementById("banana").style.color
document.getElementById("banana").onclick
document.getElementById("banana").class="fruit"
document.getElementById("banana").style.color="blue"
document.getElementById("banana").onclick= function (){alert("我是香蕉")}
关于Firefox下的onload问题
function over(){
alert("页面加载完毕")
}
正常情况下,我们赋与onload响应函数是:
document.body.onload= over
但是在Firefox下这样无法执行,
所以我们都都采用下面这种形式:
window.onload=over
关于IE下TABLE无法插入新行的问题
IE下TABLE无论是用innerHTML还是appendChild插入<tr>都没有效果,而其他浏览器却显示正常。解决他的方法是,将<tr>加到TABLE的<tbody>元素中,如下面所示:
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("香蕉不吃苹果");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);
分享到:
相关推荐
~ JavaScript 滑动标杆范围取值 (兼容多种浏览器)
javascript实现软键盘输入,兼容多种浏览器(搜狗浏览器高速模式也能很好运行),本人亲测。
js+超酷弹出层+兼容各大浏览器,多种javascript的弹出层
支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现 google code地址:http://code.google.com/p/jqueryrotate/ 下面了解下这个插件...
jQuery支持多种切换效果的CSS3焦点图代码,支持自定义切换效果。兼容主流浏览器
随着以Firefox为代表的第三方浏览器的兴起,我们做的网站也不能再JUST IE了,如果把原来的一些javascript代码放到IE以外的浏览器的话,往往都不能正常运行或出错,所以这里介绍一下怎么改进我们的JS,让它能更加规范...
Jsp图片预览程序(含Java源码) 目前,很多网站都在为提升用户体验而努力,想尽多种办法让用户在网站上...程序中的JavaScript部分兼容ie6/7/8, firefox 3.5.5以及opera 10、safari 4.0.4、 chrome 3.0 等多种浏览器。
从calendar日期控件改造来的,IE6,IE8,IE9测试过,google浏览器没通过 调用方法onfoucs="calendar()
支持Windows平台浏览器上的音频即时通讯应用开发 ...兼容IE、Chrome、Firefox、360、遨游等主流浏览器 支持iOS、Android、PC等设备和Web之间的互联互通 可开发视频会议、视频聊天、在线客服、远程教育等应用
本文主要介绍了javascript实现行号显示的文本框效果,这样就可以解决读者很难迅速找到所在某一行的对应代码,感兴趣的小伙伴们可以参考一下
这是《编译原理》的课程设计--C-Minus词法语法分析器(带有课程设计报告),采用Web前端的JavaScript实现,兼容多种浏览器。词法分析器部分采用表驱动机制实现,同时提供一套用于快速验证性的正则匹配测试工具。语法...
同ajax原理,用xmlhttp读取远程数据。javascript代码兼容多种浏览器。 是web2.0里的“无刷新技术”精华。
多浏览器兼容一直都是前端备受关注的问题,本文整理了一些实战的经验,个人感觉还不错,需要的朋友可以参考下
javascript做的一个可以支持拖拽的流程设计器,可兼容多种浏览器
主要介绍了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件,实例分析了javascript多种弹出层效果的实现技巧,非常具有实用价值,需要的朋友可以参考下
dhtmlx组件是一个JavaScript 库,提供了一套完整的Ajax驱动的UI 组件。使用 dhtmlxSuite 生成企业级 web...兼容多种浏览器,数据加载和展现性能优势明显; 已在世界范围内诸多著名的IT企业中应用,性能稳定,服务优质。
dhtmlx组件是一个JavaScript 库,提供了一套完整的Ajax驱动的UI 组件。使用 dhtmlxSuite 生成企业级 web...兼容多种浏览器,数据加载和展现性能优势明显; 已在世界范围内诸多著名的IT企业中应用,性能稳定,服务优质。
已知高危漏洞得到全部修复,兼容微软最新的Windows 11操作系统,全新的V8 JavaScript编译器Sparkplug 和short builtins 机制的引入,再加上chrome新内核页面JS执行能力,使得64位内核的360极速浏览器X相对于32位360...
JavaScript是由网景公司发明的,由于浏览器大战,出现了多种版本的JavaScript,例如IE的Jscript,所以不同浏览器会有兼容性问题 JavaScript是由浏览器运行,是一种即时编译的脚本语言,是解释性语言,不需要事先编译...