style,currentStyle,runtimeStyle,getComputedStyle的区别及用法

微笑

样式表有三种方式:

内嵌样式(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对象



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值