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 相关文章推荐
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 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
十天学会php之第八天
2006/10/09 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
php fread函数使用方法总结
2019/05/28 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Django自定义过滤器定义与用法示例
2018/03/22 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python小白垃圾回收机制入门
2020/06/09 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
办公室秘书自我鉴定
2014/01/18 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
社区灵活就业证明
2014/11/03 职场文书
支行行长竞聘报告
2014/11/06 职场文书
以权谋私检举信范文
2015/03/02 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL