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 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
百度留言本js 大家可以参考下
Oct 13 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
javascript框架设计之框架分类及主要功能
Jun 23 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
图解Sublime Text3使用技巧
Dec 21 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
编程语言JavaScript简介
2014/10/16 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
Python键盘输入转换为列表的实例
2018/06/23 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
造型师求职自荐信
2013/09/27 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
瘦西湖导游词
2015/02/03 职场文书
项目投资意向书范本
2015/05/09 职场文书
决心书格式范文
2015/09/23 职场文书
初中体育课教学反思
2016/02/16 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP