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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
javascript indexOf函数使用说明
Jul 03 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 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获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
DOM 基本方法
2009/07/18 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
Javascript之String对象详解
2016/06/08 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
儿童学习python的一些小技巧
2018/05/27 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书