JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结


Posted in Javascript onJune 18, 2010

在这篇文章中,作者介绍了7个JavaScript在IE和Firefox中存在的差异。
1. CSS “float” 值
访问一个给定CSS 值的最基本句法是:object.style.property,使用驼峰写法来替换有连接符的值,例如,访问某个ID为”header”的<div>的 background-color值,我们使用如下句法:

document.getElementById("header").style.backgroundColor= "#ccc";
但由于”float“这个词是一个JavaScript保留字,因此我们不能用 object.style.float来访问,这里,我们可以在两种浏览器中这么做:
在IE中这样写:

document.getElementById("header").style.styleFloat = "left";
在Firefox中这样写:

document.getElementById("header").style.cssFloat = "left";

2. 元素的推算样式
JavaScript可以使用object.style.property句法,方便地在外部访问和修改某个CSS样式,但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的”推算”样式,我们可以使用下面的代码:
在IE中这样写:

var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
在Firefox中这样写:

var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;
3. 访问元素的”class”
像”float“一样,”class“是JavaScript的一个保留字,在这两个浏览器中我们使用如下句法来访问”class”。
在IE中这样写:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
在Firefox中这样写:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");
This syntax would also apply using the setAttribute method.

4. 访问<label>标签中的”for”
就第3点中所提到的,我们同样需要使用不现的句法区分来访问<label>标签中的”for“:
在IE中这样写:

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
在Firefox中这样写:

var = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
5. 获取鼠标指针的位置
计算出鼠标指针的位置对你来说可能是非常少见的,不过当你需要的时候,在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基本的,也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时,必须指出的是结果相对于Firefox,IE会有更在的不同,这种方法本身就是有BUG的。通常,这种不同可以用”拖动位置”来得到补偿,但,那是另外一个主题的文章了: ) !
在IE中这样写:

var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
在Firefox中这样写:

var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;
6. 获取可见区域、窗口的大小
有时,我们会需要找到浏览器的可视位置的大小,通常我们称之为”可见区域”。
在IE中这样写:

var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;
在Firefox中这样写:

var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;
7. Alpha 透明
好吧,这并不是一个JavaScript句法问题,而是源自于CSS的Alpha透明。但当某个物体需要淡入/出则需要JavaScript来表现,这是通过访问CSS的Alpha透明设置来完成的,通常在一个循环中完成。你需要通过来修改的JavaScript的代码如下:
在IE中这样写:

#myElement { filter: alpha(opacity=50); }
在Firefox中这样写:

#myElement { opacity: 0.5; }
在IE中这样写:

var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";
在Firefox中这样写:

var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";
还有什么不同的吗?
这是作者(via: 7 JavaScript Differences Between Firefox & IE)个人根据自己的经验整理的,而sofish在JavaScript上依然是一个新手。如果还有更多的不同,欢迎大家提出来,分享出来,共同学习!

Javascript 相关文章推荐
jQuery中:input选择器用法实例
Jan 03 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
angular分页指令操作
Jan 09 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 #Javascript
js打印纸函数代码(递归)
Jun 18 #Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 #Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 #Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 #Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 #Javascript
ExtJS 设置级联菜单的默认值
Jun 13 #Javascript
You might like
基于mysql的bbs设计(五)
2006/10/09 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
python实现飞机大战
2018/09/11 Python
python递归下载文件夹下所有文件
2019/08/31 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
初入社会应届生求职信
2013/11/18 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
教师开学感言
2014/02/14 职场文书
初中学生评语大全
2014/04/24 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏