JavaScript 读取和设置文档元素的样式属性

CSS样式优先级分类

首先讨论样式表的属性分类。

第一类是内联样式，即直接写在元素style属性中的样式，其优先级最高。

第二类是页面内部样式表，定义在页面的<style>标签内，优先级次之。

第三类是外部链接的样式表文件。

直接读写内联样式

接下来介绍如何使用JavaScript获取和设置文档元素的CSS属性。

第一种方法是获取元素style属性中直接设置的样式值。

代码示例为：document.getElementById(id).style.height;

如果该属性存在，则返回其值；如果不存在，则返回空值。

在IE和Firefox浏览器中均可使用，但部分属性值的返回格式可能不同。例如，颜色属性在Firefox中通常返回rgb格式，而在IE中则返回十六进制数值。

以下是测试代码示例。

<script type="text/javascript">

function getCss(){

alert(document.getElementById("aaa").style.height);

alert(document.getElementById("aaa").style.backgroundColor);

alert(document.getElementById("aaa").style.width);

document.getElementById("aaa").style.backgroundColor = '#dbdbdb';

//alert(myWidth);

</script>

<div id="aaa" class="bbb" style="height:20px; background-color:#FF0000;">

asdfasdfas

</div>

<input type="button" value="点击" onclick="getCss();" />

获取最终渲染样式与跨浏览器兼容

第二种情况是，当样式可能在多处定义（如外部样式表或内联样式）且不确定具体生效来源时，需要获取当前页面实际渲染的样式值。这在IE和Firefox中的实现方式有所不同。

示例代码片段如下：

IE浏览器：document.getElementById('aaa').currentStyle.height

Firefox等标准浏览器：document.defaultView.getComputedStyle(aaa,null).getPropertyValue('height')

这两个属性返回的是只读值。若要修改元素样式，仍需使用style属性，因为直接写入style属性的内联样式优先级最高，会直接生效。

为了兼容IE和Firefox，可以编写一个统一的函数来获取真实样式。

function getRealStyle(id,styleName) {
var element = document.getElementById(id);
var realStyle = null;
if (element.currentStyle)
realStyle = element.currentStyle[styleName];
else if (window.getComputedStyle)
realStyle = window.getComputedStyle(element,null)[styleName];
return realStyle;
} 

调用示例：cur_height = parseInt(getRealStyle(CON_ID,'height'));