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 相关文章推荐
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
微信小程序之购物车功能
Sep 23 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 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导入模块文件分享
2015/03/17 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
window.onload使用指南
2015/09/13 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
在Python中处理XML的教程
2015/04/29 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
python写程序统计词频的方法
2019/07/29 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
模特职业生涯规划范文
2014/02/26 职场文书
日化店促销方案
2014/03/26 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
党支部意见范文
2015/06/02 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
话题作文之自信作文
2019/11/15 职场文书
关于Python使用turtle库画任意图的问题
2022/04/01 Python
JS高级程序设计之class继承重点详解
2022/07/07 Javascript