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实现轮显新闻标题链接
Aug 13 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
详解Vue打包优化之code spliting
Apr 09 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 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 checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php中使用url传递数组的方法
2015/02/11 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
PHP 实现缩略图
2021/03/09 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
结束运行python的方法
2020/06/16 Python
在keras里实现自定义上采样层
2020/06/28 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
电大物流学生的自我评价
2013/10/25 职场文书
秋天的雨教学反思
2014/04/27 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
健康证明
2015/06/19 职场文书
歌咏比赛主持词
2015/06/29 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers