style,currentStyle,runtimeStyle,getComputedStyle的区别及用法
来源:互联网 发布:小燕子和知画同时生产 编辑:程序博客网 时间:2024/05/16 08:30
1、样式表有三种方式:
内嵌样式(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相同。
权重值:
runtimeStyle > currentStyle > style
增改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对象
2、 getComputedStyle
获取当前元素的所有最终使用的CSS属性值,返回的是一个CSS的样式声明对象([Object CSSStyleDeclaration]),只读。
getComputedStyle()
gives the final used values of all the CSS properties of an element.
语法如下:
var style = window.getComputedStyle("元素", "伪类");
例如:
var dom = document.getElementById("test"), style = window.getComputedStyle(dom , ":after");
存在两个参数,Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null
),不过现在嘛,不是必需参数了。
3、getComputedStyle与style的区别
我们使用element.style
也可以获取元素的CSS样式声明对象,但是其与getComputedStyle
方法还有有一些差异的。
- 只读与可写
正如上面提到的getComputedStyle
方法是只读的,只能获取样式,不能设置;而element.style
能读能写,能屈能伸。 - 获取的对象范围
getComputedStyle
方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);而element.style
只能获取元素style
属性中的CSS样式。因此对于一个光秃秃的元素<p>
,getComputedStyle
方法返回对象中length
属性值(如果有)就是190+
(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style
就是0
defaultView
可能一是人们不太乐意在window上专门写个东西,二是让API在Java中也可用(这我不懂,忘指点~~)。defaultView
方法就搞不定的,就是访问框架(frame)的样式.对于桌面设备:
对于手机设备:
上面打问号的表示没有测试,是否兼容不知。
6、getComputedStyle与currentStyle
currentStyle是IE浏览器自娱自乐的一个属性,其与element.style可以说是近亲,至少在使用形式上类似。element.currentStyle与element.style的区别在于:element.currentStyle返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>属性等)
因此,从作用上将,getComputedStyle
方法与currentStyle
属性走的很近,形式上则style
与currentStyle
走的近。不过,currentStyle
属性貌似不支持伪类样式获取,这是与getComputedStyle
方法的差异,也是jQuery css()
方法无法体现的一点。
例如:要获取一个元素的高度,可以类似下面的代码:
alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);
24px
(经过计算了), 而IE浏览器下则是CSS中的2em
属性值.7、getPropertyValue方法(不支持驼峰写法)
获取CSS样式声明对象上的属性值(直接属性名称)。如:
window.getComputedStyle(element,null).getPropertyValue("float");
如果我们不使用getPropertyValue
方法,直接使用键值访问,其实也是可以的。但是,比如这里的的float
,如果使用键值访问,则不能直接使用getComputedStyle(element, null).float
,而应该是cssFloat
与styleFloat
,自然需要浏览器判断了,比较折腾!
使用getPropertyValue
方法不必可以驼峰书写形式(不支持驼峰写法),例如:style.getPropertyValue("border-top-left-radius")
;
兼容性getPropertyValue
方法IE9+以及其他现代浏览器都支持,见下表:
OK,一涉及到兼容性问题(IE6-8肿么办),感觉头开始微微作痛了~~,不急,IE自由一套自己的套路,就是getAttribute
方法。
在老的IE浏览器(包括最新的),getAttribute
方法提供了与getPropertyValue
方法类似的功能,可以访问CSS样式对象的属性。用法与getPropertyValue
类似:
style.getAttribute("float");
注意到没,使用getAttribute
方法也不需要cssFloat
与styleFloat
的怪异写法与兼容性处理。不过,还是有一点差异的,就是属性名需要驼峰写法,如下:
style.getAttribute("backgroundColor");
如果不考虑IE6浏览器,貌似也是可以这么写:
style.getAttribute("background-color");
9、getPropertyValue和getPropertyCSSValue
从长相上看getPropertyCSSValue
与getPropertyValue
是近亲,但实际上,getPropertyCSSValue
要顽劣的多。
getPropertyCSSValue
方法返回一个CSS最初值(CSSPrimitiveValue)对象(width, height, left, …)或CSS值列表(CSSValueList)对象(backgroundColor, fontSize, …),这取决于style
属性值的类型。在某些特别的style属性下,其返回的是自定义对象。该自定义对象继承于CSSValue对象(就是上面所说的getComputedStyle
以及currentStyle
返回对象)。
getPropertyCSSValue
方法兼容性不好,IE9浏览器不支持,Opera浏览器也不支持(实际支持,只是老是抛出异常)。而且,虽然FireFox中,style
对象支持getPropertyCSSValue
方法,但总是返回null
. 因此,目前来讲,getPropertyCSSValue
方法可以先不闻不问。
- style,currentStyle,runtimeStyle,getComputedStyle的区别及用法
- style,currentStyle,runtimeStyle,getComputedStyle的区别及用法
- currentStyle、runtimeStyle、getComputedStyle的区别
- currentStyle,runtimeStyle,getComputedStyle style
- style,currentStyle,getComputedStyle的区别和用法
- style currentStyle getComputedStyle的区别和用法
- style,runtimeStyle与currentStyle的定义及用法
- Style currentStyle computedStyle 和 runtimeStyle 的区别
- style、 currentStyle、 runtimeStyle区别分析
- JS中style、currentStyle、getComputedStyle的区别
- JS中style、currentStyle、getComputedStyle的区别
- js中style、currentStyle、getComputed、runtimeStyle的区别
- style、currentStyle、getComputedStyle区别介绍
- style、currentStyle、getComputedStyle区别介绍
- style、currentStyle、getComputedStyle区别介绍
- style、currentStyle、getComputedStyle区别介绍
- style、currentStyle、getComputedStyle区别介绍
- style、currentStyle、getComputedStyle区别介绍
- java SDK及Android SDK环境配置
- DeepID算法实践
- 迈出的第一步,我的第一篇博客撰写
- 牛客网-拼接最小字典序问题
- oracle中的exists 和not exists 用法详解
- style,currentStyle,runtimeStyle,getComputedStyle的区别及用法
- Codeforces Round #346 (Div. 2)-B. Qualifying Contest(排序)
- 微博背后的那些算法
- Linux _文件操作demo
- 2016年开学感想
- Doctrine学习笔记 —— 1
- Google Drive开启API和创建Credential
- BZOJ 1085([SCOI2005]骑士精神-A*)
- 第五周项目(2)-时间类(1)【典型错误的更正】