手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript 获取元素样式必杀技
javascript 获取元素样式必杀技
摘要:Javascript获取CSS属性值方法:getComputedStyle和currentStyle1.对于元素的内联CSS样式(hello...

Javascript获取CSS属性值方法:getComputedStyle和currentStyle

1 .对于元素的内联CSS样式(<div>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不能返回值。但是,如果用户指定了 <Pred'">,currentStyle和STYLE对象都将返回值 red。

currentStyle对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:

1) 内嵌样式

2) 样式表规则

3) HTML 标签属性

4) HTML 标签的内部定义

2. 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) {

return node.currentStyle[property];

}

else if (document.defaultView && document.defaultView.getComputedStyle) {

var style = document.defaultView.getComputedStyle(node, null);

return style.getPropertyValue(property);

}

return null;

}

【javascript 获取元素样式必杀技】相关文章:

javascript实现Table排序的方法

javascript动态设置样式style实例分析

javascript原型模式用法实例详解

Javascript 小技巧全集第1/4页

javascript实现可全选、反选及删除表格的方法

javascript实现删除前弹出确认框

javascript实现可拖动变色并关闭层窗口实例

javascript获取文档坐标和视口坐标

javascript+HTML5自定义元素播放焦点图动画

Javascript 字符串模板的简单实现

精品推荐
分类导航