JavaScript 获取非内联样式：currentStyle 与 getComputedStyle 详解

CSS样式的三种应用方式

CSS样式的应用方式主要分为三种：内嵌样式（Inline Style）直接写在HTML标签内部，仅对当前标签生效；内部样式表（Internal Style Sheet）置于HTML文档的<head>部分，仅对当前网页有效；外部样式表（External Style Sheet）则保存为独立的.css文件，供多个网页共同引用，便于统一管理。

 
var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
var width = mydiv.currentStyle['width'];
alert('ie:' + width);
} else if(window.getComputedStyle) {
var width = window.getComputedStyle(mydiv , null)['width']
alert('firefox:' + width);
} 
此外，在Firefox浏览器中还可以通过以下方式获取样式：
document.defaultView.getComputedStyle(mydiv,null).width
window.getComputedStyle(mydiv , null).width

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Document</title> <style> #test{width:200px;} </style>  </head> <body> <div id="test">this is test content</div>  </body> </html> 

style、runtimeStyle与currentStyle的区别

在JavaScript中，最常用的是style属性，通过document.getElementById(id).style.XXX可以获取对应值。但需要注意的是，这种方式只能获取通过内联方式（即在HTML标签的style属性中）设置的样式值。

为了解决读取非内联样式的问题，需要引入currentStyle、runtimeStyle和getComputedStyle属性。

style：代表标准的样式，通常由HTML中的style属性直接指定。

runtimeStyle：代表运行时的样式。如果该属性与style属性发生重叠，runtimeStyle的值将覆盖style属性。

currentStyle：指style和runtimeStyle的结合体。

通过currentStyle属性，可以获取通过内联或外部引用CSS设置的样式值，但这仅限于IE浏览器。

例如：document.getElementById("test").currentStyle.top

若要兼容Firefox等标准浏览器，则需要使用getComputedStyle方法。

注意：getComputedStyle是Firefox等标准浏览器支持的方法。

currentStyle则是IE浏览器特有的属性。

具体示例如下：

 
<style>
#mydiv {
width : 300px;
} 
}</style>

则对应的JavaScript处理代码如下:

 
var mydiv = document.getElementById('mydiv');
if(mydiv.currentStyle) {
var width = mydiv.currentStyle['width'];
alert('ie:' + width);
} else if(window.getComputedStyle) {
var width = window.getComputedStyle(mydiv , null)['width'];
alert('firefox:' + width);
} 

另外在FF下还可以通过下面的方式获取

 
document.defaultView.getComputedStyle(mydiv,null).width
window.getComputedStyle(mydiv , null).width