IE与Firefox JavaScript差异：CSS属性获取的4个关键区别

本文将简要介绍Internet Explorer与Firefox在JavaScript语法方面的7个不同之处。

CSS float 属性获取差异

获取对象特定CSS属性的基本语法是使用object.style属性，对于包含连字符的属性名，需转换为骆驼命名法。例如，获取ID为“header”的div元素的background-color属性，语法如下：

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

然而，由于“float”是JavaScript的保留字，无法直接使用object.style.float来获取该属性。以下是两种浏览器中的处理方法：

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

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

元素计算样式获取方法

通过上述object.style.property语法，JavaScript可以方便地获取和修改对象的CSS样式。但该语法的局限在于，它只能获取HTML中内联的样式或通过JavaScript直接设置的样式，style对象无法获取外部样式表中定义的样式。为了获取对象的“计算样式”，可使用以下代码：

var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;

var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

元素 class 属性获取

与“float”属性类似，这两种浏览器在获取该属性时使用了不同的JavaScript方法。

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

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

label for 属性获取

与第3点类似，使用JavaScript获取label标签的“for”属性也存在语法差异。

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

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

对于setAttribute方法，也存在相同的语法差异。