JavaScript 获取 CSS 样式：getComputedStyle 与 currentStyle 详解

JavaScript 获取 CSS 属性值的核心方法

获取CSS属性值方法：getComputedStyle和currentStyle 1.对于元素的内联CSS样式（<div style="color:#369">hello</div>），可以直接使用element.style.color来直接获取css属性的值； 2.但是对于外部定义的css样式使用这种方式就无法获取了，而且IE浏览器和其他标准浏览器（Firefox，Chrome，Opera，Safari）使用的方法不一样，IE浏览器使用element.currentStyle，W3C标准浏览器使用getComputedStyle来获取。 1. IE获取元素外部定义的CSS属性值: element.currentStyle currentStyle对象返回了元素上的样式表，但是style对象只返回通过style标签属性应用到元素的内嵌样式。 因此，通过currentStyle对象获取的样式值可能与通过style对象获取的样式值不同。 例如，如果段落的color属性值通过链接或嵌入样式表设置为红色( red )，而不是内嵌的话，对象.currentStyle.color 将返回正确的颜色，而对象style.color不能返回值。但是，如果用户指定了 <P STYLE="color:'red'">，currentStyle和STYLE对象都将返回值 red。 currentStyle对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为： 1) 内嵌样式 2) 样式表规则 3) HTML 标签属性 4) HTML 标签的内部定义 2. W3C获取元素外部定义的CSS属性值: window.getComputedStyle(element, pseudoElt) element必选，HTML元素 pseudoElt必选，获取该元素的伪类样式

 
currentStyle 对象返回了元素上的样式表，但是 style 对象只返回通过 style 标签属性应用到元素的内嵌样式。因此，通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。例如，如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red )，而不是内嵌的话，对象.currentStyle.color 将返回正确的颜色，而对象 style.color 不能返回值。但是，如果用户指定了 <P STYLE="color:'red'">，currentStyle 和 STYLE 对象都将返回值 red。currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为：1) 内嵌样式 2) 样式表规则 3) HTML 标签属性 4) HTML 标签的内部定义
W3C 标准浏览器的 getComputedStyle 机制W3C 获取元素外部定义的 CSS 属性值: window.getComputedStyle(element, pseudoElt)
element 必选，HTML 元素
} 
pseudoElt 必选，获取该元素的伪类样式
兼容多浏览器的样式获取代码示例代码如下:
} 
function getStyle(node, property){
if (node.style[property]) {
return node.style[property];
} 
else if (node.currentStyle) {
}