IE与Firefox在JavaScript上的7个不同写法小结


Posted in Javascript onSeptember 14, 2009

在这篇文章中,作者介绍了7个在IE和Firefox中不同的JavaScript句法。
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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
JavaScript 函数调用规则
Sep 14 #Javascript
prototype与jquery下Ajax实现的差别
Sep 13 #Javascript
JS 参数传递的实际应用代码分析
Sep 13 #Javascript
javascript类继承机制的原理分析
Sep 12 #Javascript
javascript 类定义的4种方法
Sep 12 #Javascript
一个简单的javascript类定义例子
Sep 12 #Javascript
一个简单的JavaScript 日期计算算法
Sep 11 #Javascript
You might like
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python生成excel的实例代码
2017/11/08 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
中层干部岗位职责
2013/12/18 职场文书
小露珠教学反思
2014/04/30 职场文书
环保倡议书50字
2014/05/15 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
导游词之张家界
2019/10/31 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android