IE和Firefox之间在JavaScript语法上的差异


Posted in Javascript onApril 22, 2016

尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。

这篇文章中,我会略述一下 Internet Explorer 和 Firefox 在 JavaScript 语法上不同的 7 个方面。

1. CSS “float” 属性

获取给定对象的特定 CSS 属性的基本语法是 object.style 属性,而且有连字符的属性要用骆驼命名法来代替。例如,获取一个 ID 为 “header” 的 div 的 background-color 属性,我们要用如下语法:

document.getElementById("header").style.borderBottom= "1px solid #ccc";

但是由于 “float” 是 JavaScript 的保留词,我们就无法使用 object.style.float 来获取 “float” 属性了。一下是我们在两种浏览器中的使用的方法:

IE 语法: 

document.getElementById("header").style.styleFloat = "left";

Firefox 语法: 

document.getElementById("header").style.cssFloat = "left";

2. 元素的计算样式

通过使用上述的 object.style.property, JavaScript 可以很容易的获取和修改对象的设定 CSS 样式。但是这一语法的局限在于,它只能取得内联在 HTML 里的样式,或者直接使用 JavaScript 设定的样式。style 对象不能获取使用外部样式表设定的样式。为了获取对象的”计算样式”,我们使用以下代码:

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”属性的情况,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。

IE 语法: 

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");

Firefox 语法: 

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

4. 获取 label 标签的 “for” 属性

和 3 一样,使用 JavaScript获取 label 的 “for” 属性也有不同语法。

IE 语法: 

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");

Firefox 语法: 

var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");

对于 setAtrribute 方法来说也是同样的语法。

5. 获取光标位置

获取元素的光标位置比较少见,如果需要这么做,IE 和 Firefox 的语法也是不同的。这个示例代码是相当基础的,一般用作许多复杂事件处理的一部分,这里仅用来描述差异。需要注意的是,IE 中的结果和 Firefox 中是不同的,因此这个方法有些问题。通常,这个差异可以通过获取 “滚动位置” 来补偿 - 但那是另外一篇文章的课题了。

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 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时,这就需要通过获取 CSS 的 alpha 设定来实现,一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码:

IE 语法:

#myElement {
filter: alpha(opacity=50);
}

Firefox 语法:

#myElement {
opacity: 0.5;
}

要使用 JavaScript 获取这些值,需要使用 style 对象:

IE 语法: 

var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";

Firefox 语法:

var myObject = document.getElementById("myElement");
myObject.style.opacity = "0.5";

当然,已经说到了,一般是在循环中间来改变 opcity/alpha,来创建动画效果,但这这是个简单的例子,只是为了明白地描述方法是如何实现地。

7个方面在JavaScript语法上不同的点,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript面向对象之二 命名空间
Feb 08 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
动态加载JavaScript文件的两种方法
Apr 22 #Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 #Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 #Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 #Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 #Javascript
javascript常见数字进制转换实例分析
Apr 21 #Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
django的ORM模型的实现原理
2019/03/04 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
使用Python封装excel操作指南
2021/01/29 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
银行员工辞职信范文
2014/01/20 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
关于环保的建议书
2014/05/12 职场文书
环境卫生倡议书
2014/08/29 职场文书
学生检讨书
2015/01/27 职场文书
员工自我工作评价
2015/03/06 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA