码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 获取元素样式的方法

时间:2014-05-05 10:19:39      阅读:448      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   color   

javascript 获取元素样式常用方法。
Javascript获取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必选,获取该元素的伪类样式 
bubuko.com,布布扣
function getStyle(node, property){ 
if (node.style[property]) { 
return node.style[property]; 

else if (node.currentStyle) { 
return node.currentStyle[property]; 
// www.jbxue.com
else if (document.defaultView && document.defaultView.getComputedStyle) { 
var style = document.defaultView.getComputedStyle(node, null); 
return style.getPropertyValue(property); 

return null
bubuko.com,布布扣

javascript 获取元素样式的方法,布布扣,bubuko.com

javascript 获取元素样式的方法

标签:style   blog   class   code   java   color   

原文地址:http://www.cnblogs.com/linuxnotes/p/3707870.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!