尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。
这篇文章中,我会略述一下 Internet Explorer 和 Firefox 在 JavaScript 语法上不同的几 个方面。
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;
分享到:
相关推荐
详细讲解IE和Firefox中css和javascript的差异和兼容!
Javascript在IE和FireFox中的不同表现,总结IE和火狐的差异。
主要为大家详细介绍了IE和Firefox之间在JavaScript语法上的差异,在JavaScript语法上不同的7个方面,感兴趣的小伙伴们可以参考一下
总结一部分IE和Firefox的javascript差异写法,对于像书写多浏览器兼容性更好的代码,可以参考下。
为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一、函数和方法差异; 二、样式访问和设置; 三、DOM方法及对象引用; 四、事件处理; 五、其他差异的兼容处理。 一、函数和方法差异 1. getYear()...
尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去,偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。
我们经常在处理ie和firefox下的js总会碰到一些兼容问题,下面是些总结,希望大家仔细看看研究
这篇文章中,我会略述一下 Internet Explorer 和 Firefox 在 JavaScript 语法上不同的 7 个方面。 1. CSS “float” 属性 获取给定对象的特定 CSS 属性的基本语法是 object.style 属性,而且有连字符的属性要用骆驼...
为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 代码如下:一、函数和方法差异;二、样式访问和设置;三、DOM方法及对象引用;四、事件处理;五、其他差异的兼容处理。 一、函数和方法差异 1. ...
这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。首先看如下代码: 代码如下: function doEventThing(eventTag){ var event = eventTag||...
document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异示例:...
现在我把正则表达式在五大主流浏览器(IE、Firefox、Chrome、Safari、Opera,以当前版本为准)之间的差异整理一下罗列出来,给大家,也算给我自己做一个备忘。 1、Firefox和Chrome会过度优化在循环(以及其中内嵌的...
主要介绍了jQuery 中DOM 操作详解,以及在火狐和IE之间的13点JavaScript差异,需要的朋友可以参考下
1,IE6/7/8/9中无事件(如click,mouseover),Firefox/Safari/Chrome/Opera则有。 代码如下: <select id=”s1″ multiple=”multiple”> ”1″ xss=removed>1</option> ”2″ xss=removed>2</option> </...