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 相关文章推荐
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
php网页后退不再出现过期
2007/03/08 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
js实现登录验证码
2016/12/22 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
详解如何运行vue项目
2019/04/15 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
vue的滚动条插件实现代码
2019/09/07 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
pytorch 常用线性函数详解
2020/01/15 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
护理专业毕业生自荐信范文
2014/01/05 职场文书
档案接收函范文
2014/01/10 职场文书
教学实习自我评价
2014/01/28 职场文书
cf搞笑广告词
2014/03/14 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
先进员工获奖感言
2014/08/14 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript