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图片滚动与幻灯片的实例代码
Apr 08 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
微信小程序实现日历小功能
Nov 18 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自动适应范围的分页代码
2008/08/05 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
npm的lock机制解析
2019/06/20 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python调用c++传递数组的实例
2019/02/13 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
简单的辞职信范文
2014/01/18 职场文书
司法所长先进事迹
2014/06/02 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
学生会部长竞选稿
2015/11/19 职场文书
品德与社会教学反思
2016/02/24 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS