关于js中style,currentstyle和getcomputedstyle几个注意的地方
(1)用js的style只能获取元素的内联,内部样式和外部样式使用style是获取不到的。针对css样式里background-color;margin-left之类的短杠相接的属性名称,在使用style属性获取设置样式的时候名称要改为驼峰式,如ele.style.backgroundcolor。
(2)currentstyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于ie。
(3)getcomputedstyle同currentstyle作用相同,但是适用于ff、opera、safari、chrome。
注意:
① currentstyle和getcomputedstyle只能用于获取页面元素的样式,不能用来设置相关值。
② 如果要设置相应值,应使用style。
补充:
内联方式:样式定义在单个的html元素中 ,如
测试例子
内部样式表:样式定义在html页的头元素中
外部样式表:将样式定义在一个外部的css文件中(.css文件),由html页面引用样式表文件
保证兼容的做法
js中获取css样式属性值
关于window.getcomputedstyle(element, [pseudoelt])
参数解析:
(1).element:必需,要获取样式值的元素对象。
(2).pseudoelt:可选,表示指定节点的伪元素(:before、:after、:first-line、:first-letter等)。
获取样式属性升级版:
function getstyle(obj, attr , pseudoelt=false){
return obj.currentstyle?obj.currentstyle[attr]:getcomputedstyle(obj,pseudoelt)[attr]
}
源代码地址:https://github.com/zuobaiquan/javascript/blob/master/js中获取css样式属性值.html