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 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 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
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
Python批量转换文件编码格式
2015/05/17 Python
python实现RSA加密(解密)算法
2016/02/17 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python支持多继承吗
2020/06/19 Python
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
什么是servlet链?
2014/07/13 面试题
人事文员岗位职责
2014/02/16 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
公共场所标语
2014/06/30 职场文书
公证委托书格式
2014/09/13 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript