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 EasyUI 数字格式化处理示例
May 05 Javascript
PHP PDO操作总结
Nov 17 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
第一篇初识bootstrap
Jun 21 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
JS实现简单打字测试
Jun 24 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代码
2010/02/16 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
Python交换变量
2008/09/06 Python
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python多线程下载文件的方法
2015/07/10 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
python pytest进阶之fixture详解
2019/06/27 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python实现简单井字棋游戏
2020/03/04 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
Python的两道面试题
2013/06/29 面试题
博士研究生自我鉴定范文
2013/12/04 职场文书
小学端午节活动方案
2014/03/13 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
小学教代会开幕词
2016/03/04 职场文书
python基础之while循环语句的使用
2021/04/20 Python