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 设计模式之组合模式解析
Apr 09 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
js实现显示手机号码效果
Mar 09 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 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实现WEB动态网页静态
2006/10/09 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php date()日期时间函数详解
2010/05/16 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python简单读取json文件功能示例
2017/11/30 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python 实现微信自动回复的方法
2020/09/11 Python
python 获取字典键值对的实现
2020/11/12 Python
工厂仓管员岗位职责
2014/01/01 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书