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使用指南之enumerable.js
Jan 10 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
Javascript webpack动态import
Apr 19 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
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
Python字符编码判断方法分析
2016/07/01 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Python定义一个函数的方法
2020/06/15 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
大学生水文观测实习自我鉴定
2013/09/29 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
工作简报怎么写
2015/07/21 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书