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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python决策树分类算法学习
2017/12/22 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
django 修改server端口号的方法
2018/05/14 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
python线性插值解析
2020/07/05 Python
大学生军训感想
2014/02/16 职场文书
对公司合理化的建议书
2014/03/12 职场文书
环境整治工作方案
2014/05/18 职场文书
教师考察材料范文
2014/06/03 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL