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 相关文章推荐
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
初学者AngularJS的环境搭建过程
Oct 27 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
利用js实现简单开关灯代码
Nov 23 Javascript
动态加载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
默默简单的写了一个模板引擎
2007/01/02 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
JS功能代码集锦
2016/05/04 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
django rest framework 自定义返回方式
2020/07/12 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
总经理秘书的岗位职责
2013/12/27 职场文书
企业给企业的表扬信
2014/01/13 职场文书
股权转让协议书
2014/04/12 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
上班迟到检讨书
2014/09/15 职场文书
司机岗位职责
2015/02/04 职场文书