JavaScript 获取元素样式的兼容性与原理详解

在讨论如何使用JavaScript获取元素样式之前，有必要先简要回顾一下CSS样式的基本概念。

CSS样式的三种类型与优先级

CSS样式主要可以分为三种类型。

外部样式表是指以.css为扩展名的文件，通常被称为“层叠样式表”。这类样式表的作用范围广泛，可以应用于多张网页、整个网站，甚至跨站点使用。只有当HTML文档通过链接引入这些文件后，样式才会生效。

嵌入式样式表是指直接包含在HTML网页内部的样式设置。其作用范围仅限于嵌入该样式的特定网页，其他页面无法直接应用。

内联样式表是指将格式化信息直接插入到HTML元素的标签中，作为标签的属性参数存在。严格来说，内联样式并非真正的“表”，而仅仅是一条HTML标记指令。

当多种样式同时作用于同一元素且出现冲突时，优先级顺序为：内联样式 > 嵌入式样式 > 外部样式。

JavaScript获取样式的兼容性问题

在使用JavaScript获取这三种样式时，直接访问元素的style属性只能获取内联样式，无法读取外部或嵌入式样式。因此，通常需要借助currentStyle属性（仅IE支持）或getComputedStyle方法（Firefox等标准浏览器支持）来获取计算后的最终样式。

下面介绍两种能够兼容Firefox和Internet Explorer（IE）浏览器的正确获取样式的方法。

 
定义一个辅助函数用于快速获取元素：var $=function(id){return document.getElementById(id) };
方法一：
/* 
* @param {string} id 元素ID
* @param {string} styleName 样式属性名
*/ 
function getEyeJsStyle(id,styleName){
if($(id).currentStyle){//IE浏览器支持currentStyle
return $(id).currentStyle[styleName];
}else{ //Firefox等标准浏览器
var $arr=$(id).ownerDocument.defaultView.getComputedStyle($(id), null);
return $arr[styleName];
} 
} 

方法二：

 
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
}); 

getComputedStyle函数详解

接下来讲解getComputedStyle函数的具体用法。

该函数接收两个参数：

第一个参数是需要获取样式的DOM元素对象；

第二个参数指定伪元素，例如:hover、:first-letter或:before等；

如果不需要获取伪元素的样式，则该参数应设置为null。

getComputedStyle()函数可以通过document.defaultView对象访问，调用方式如上述代码所示。

runtimeStyle属性与覆盖机制

此外，还需了解runtimeStyle属性。该属性仅在IE浏览器中支持，Firefox等标准浏览器不支持。

runtimeStyle表示运行时的样式。如果设置了runtimeStyle的属性，它将覆盖style属性的值。

这意味着，当指定了runtimeStyle时，当前显示的样式以runtimeStyle为准；如果取消设置runtimeStyle，当前显示样式将恢复为currentStyle定义的样式。

案例演示：

执行document.getElementById("eyejs").runtimeStyle.width="400px";后，该元素的宽度将被设置为400px，这将覆盖style属性中定义的宽度。

相关案例分析与打包下载资源。