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 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
JS常用正则表达式总结
Nov 12 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
Bootstrap表单布局
2016/07/19 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
JS实现的找零张数最小问题示例
2017/11/28 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
Python获取当前函数名称方法实例分享
2018/01/18 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python画双y轴图像的示例代码
2019/07/07 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Python requests接口测试实现代码
2020/09/08 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
运动会开幕式解说词
2014/02/05 职场文书
春风行动实施方案
2014/03/28 职场文书
通信工程专业求职信
2014/06/04 职场文书
党在我心中演讲稿
2014/09/02 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL