样式表有三种方式:

内嵌样式(inline Style) :是写在html标签里面的。
内部样式(internal Style Sheet):是写在HTML的头部。
外联样式表(External Style Sheet):是用link链接到外部css文件。

style:标准的样式!可用来查询由html标签的style属性指定的样式。
currentStyle:可用来查询/修改外联或者内部样式表中的样式(仅IE、Opera)。 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。当使用currentStyle做条件判断是,要加上body,document.body.currentStyle,这样才能兼容上IE6,7。
runtimeStyle: 运行时的样式!如果与style的属性重叠,将覆盖style的属性。代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。
getComputedStyle:用于Firefox、Chrome、Safari、Opera等浏览器,作用与currentStyle相同。

currentStyle 指浏览器当前显示的,如果用runtimeStyle 写入新样式,那么这个新样式权重最高,currentStyle的值亦改为新样式,所以可以说currentStyle是style 和 runtimeStyle 的结合。即运行时就是runtimeStyle ,否则就style 或currentStyle 。

用法 作用
 style  obj.style.att  只能获取或修改内嵌样式
增改top、left等,IE里直接写数值,Firefox等要加”px”
 runtimeStyle  obj.runtimeStyle.att
obj.runtimeStyle[att]
 能修改(仅添加、修改)三种方式的样式(仅IE)
 currentStyle  obj.currentStyle.att
obj.currentStyle[att]
 能获取(仅获取)三种方式的样式(仅IE)
 getComputedStyle  window.getComputedStyle(obj, pseudoElt)[att]
window.getComputedStyle(obj, pseudoElt).att
window.getComputedStyle(obj, pseudoElt).getPropertyValue(att)
window.getComputedStyle(obj, pseudoElt).getPropertyCSSValue(att)
document.defaultView.getComputedStyle(obj,pseudoElt)[att]
document.defaultView.getComputedStyle(obj,pseudoElt).att
document.defaultView.getComputedStyle(obj,pseudoElt)
.getPropertyValue(att)
document.defaultView.getComputedStyle(obj,pseudoElt)
.getPropertyCSSValue(att)
 能获取(仅获取)三种方式的样式(除IE)
要修改就直接用obj.style.arr

 

当arr为字符串传参时,带中括号 [ ] 的格式可以识别,而.arr格式不能识别。

getComputedStyle的语法可为以上八种,严格来说,带上getPropertyValue或getPropertyCSSValue才算是标准吧。其中pseudoElt是指伪元素,如:after, :before, :marker, :line-marker之类的,如果不用伪类,则填null就可以了。getPropertyValue和getPropertyCSSValue有什么区别呢,getPropertyValue返回的是一个string,而getPropertyCSSValue返回的是一个CSS2Properties对象

© 2012 Hedgehog Suffusion theme by Sayontan Sinha