IE与Firefox JavaScript兼容性：7种常见写法差异详解

本文汇总了7种在IE和Firefox浏览器中JavaScript语法存在差异的典型场景。

CSS属性访问差异

访问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";

获取元素推算样式

虽然JavaScript允许通过

object.style.property

语法便捷地读写行内或JS动态设置的CSS样式，但该方式无法获取外部样式表中定义的“推算”样式。若需获取元素的最终计算样式，可使用以下代码：

在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;

访问class与for属性

与"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");

该语法同样适用于

setAttribute

方法。

基于第3点的经验，访问<label>标签的"for"属性时，也需区分不同浏览器的写法：

在IE浏览器中：

var myObject = document.getElementById("myLabel");

var myAttribute = myObject.getAttribute("htmlFor");

在Firefox浏览器中：

var = document.getElementById("myLabel");

var myAttribute = myObject.getAttribute("for");

获取鼠标指针位置虽不常见，但在复杂事件处理中可能用到。以下代码展示了最基本的实现及两者的差异。需注意，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浏览器中：

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;

这并非JavaScript语法问题，而是源于CSS Alpha透明机制。实现淡入/出效果时，需通过JS修改CSS Alpha设置，通常涉及循环操作。修改代码示例如下：

Alpha透明样式处理

在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";

是否还有其他差异？

以上内容基于作者（via: 7 JavaScript Differences Between Firefox & IE）的个人经验整理，sofish在JavaScript领域尚属新手。若有更多差异，欢迎提出并分享，共同学习进步！