IE与Firefox在JavaScript上的7个不同句法分享


Posted in Javascript onOctober 30, 2011

在这篇文章中,作者介绍了7个在IE和Firefox中不同的JavaScript句法。

IE与Firefox在JavaScript上的7个不同句法分享
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";
Javascript 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
加载 Javascript 最佳实践
Oct 30 #Javascript
js判断是否为数组的函数: isArray()
Oct 30 #Javascript
JS trim去空格的最佳实践
Oct 30 #Javascript
js中更短的 Array 类型转换
Oct 30 #Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 #Javascript
关于图片按比例自适应缩放的js代码
Oct 30 #Javascript
js 弹出菜单/窗口效果
Oct 30 #Javascript
You might like
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
javascript计时器详解
2015/02/28 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
javascript实现拖拽碰撞检测
2020/03/12 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
Python 的内置字符串方法小结
2016/03/15 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
Django 框架模型操作入门教程
2019/11/05 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
JDK安装目录下有哪些内容
2014/08/25 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
心理健康课教学反思
2014/02/13 职场文书
小学生学习感言
2014/03/10 职场文书
同学会主持词
2014/03/18 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2014年计生工作总结
2014/11/21 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
python 实现体质指数BMI计算
2021/05/26 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
Python正则表达式中flags参数的实例详解
2022/04/01 Python