javascript 获取元素样式必杀技_javascript技巧
程序员文章站
2022-05-13 10:33:58
...
Javascript获取CSS属性值方法:getComputedStyle和currentStyle
1 .对于元素的内联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不能返回值。但是,如果用户指定了
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;
}
1 .对于元素的内联CSS样式(
hello
),可以直接使用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不能返回值。但是,如果用户指定了
,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;
}
下一篇: php 位运算符
推荐阅读
-
腾讯的ip接口 方便获取当前用户的ip地理位置_javascript技巧
-
关于javascript获取内联样式与嵌入式样式的实例
-
js获取input长度并根据页面宽度设置其大小及居中对齐_javascript技巧
-
父节点获取子节点的字符串示例代码_javascript技巧
-
js按指定格式显示日期时间的样式代码_javascript技巧
-
javascript获取当前鼠标坐标的方法_javascript技巧
-
IE6/7中getAttribute获取href/src 属性(相对路径0值与其它浏览器不同_javascript技巧
-
js中设置元素class的三种方法小结_javascript技巧
-
遍历DOM对象内的元素属性示例代码_javascript技巧
-
javascript抖动元素的小例子_javascript技巧