样式表有三种方式:
内嵌样式(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对象