主题 : JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍
级别: 侠客
可可豆: 620 CB
威望: 620 点
在线时间: 10(时)
发自: Web Page
JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍&&&
本文为 H5EDU 机构官方 HTML5培训 教程，主要介绍：JavaScript强化教程 —— style、currentStyle、getComputedStyle区别介绍style、currentStyle、getComputedStyle区别介绍样式表有三种方式内嵌样式（inline Style） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。内部样式（internal Style Sheet）：是写在HTML的里面的，内部样式只对所在的网页有效。外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。解决方案：引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的！runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！currentStyle 指 style 和 runtimeStyle 的结合！ 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了（仅限IE） 如：document.getElementById(&test&).currentStyle.top要兼容FF，就得需要getComputedStyle 出马了注意: getComputedStyle是firefox中的， currentStyle是ie中的. 比如说&style&#mydiv {&&&& width : 300}&/style&则:var mydiv = document.getElementById('mydiv');if(mydiv.currentStyle) {&&&&&&var width = mydiv.currentStyle['width'];&&&&&&alert('ie:' + width);} else if(window.getComputedStyle) {&&&&&&var width = window.getComputedStyle(mydiv , null)['width'];&&&&&&alert('firefox:' + width);}另外在FF下还可以通过下面的方式获取12document.defaultView.getComputedStyle(mydiv,null).window.getComputedStyle(mydiv , null).
关注本帖(如果有新回复会站内信通知您)
苹果公司现任CEO是谁？2字 正确答案:库克
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版前端页面基础(HTML/CSS)（63）
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
&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返回的是一个
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方法还有有一些差异的。
4、getComputedStyle与defaultView
jQuery里面的css()的实现并不是使用window.getComputedStyle，而是document.defaultView.getComputedStyle
注：实际上使用defaultView基本是没有必要的，因为getComputedStyle本身就存在于window对象中。根据的说法，使用defaultView可能一是人们不太乐意在window上专门写个东西，二是让API在Java中也可用（这我不懂，忘指点~~）。
不过有个特殊情况，在FireFox3.6上不使用defaultView方法就搞不定的，就是.
5、getComputedStyle的兼容性
对于桌面设备：
Firefox (Gecko)
Internet Explorer
伪类元素支持
对于手机设备：
Firefox Mobile (Gecko)
Opera Mobile
Safari Mobile
伪元素支持
上面打问号的表示没有测试，是否兼容不知。
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);
结果：FireFox下显示24px(经过计算了),
而IE浏览器下则是CSS中的2em属性值.
<span style="color:#、getPropertyValue方法（不支持驼峰写法）
获取CSS样式声明对象上的属性&#20540;（直接属性名称）。如：
window.getComputedStyle(element,null).getPropertyValue(&float&);
如果我们不使用getPropertyValue方法，直接使用键&#20540;访问，其实也是可以的。但是，比如这里的的float，如果使用键&#20540;访问，则不能直接使用getComputedStyle(element,
null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！
使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue(&border-top-left-radius&);
getPropertyValue方法IE9&#43;以及其他现代浏览器都支持，见下表：
Firefox (Gecko)
Internet Explorer
OK，一涉及到兼容性问题(IE6-8肿么办)，感觉头开始微微作痛了~~，不急，IE自由一套自己的套路，就是getAttribute方法。
8、getPropertyValue和getAttribute
在老的IE浏览器（包括最新的），getAttribute方法提供了与getPropertyValue方法类&#20284;的功能，可以访问CSS样式对象的属性。用法与getPropertyValue类&#20284;：
style.getAttribute(&float&);
注意到没，使用getAttribute方法也不需要cssFloat与styleFloat的怪异写法与兼容性处理。不过，还是有一点差异的，就是属性名需要驼峰写法，如下：
style.getAttribute(&backgroundColor&);
如果不考虑IE6浏览器，貌&#20284;也是可以这么写：
style.getAttribute(&background-color&);
<span style="color:#、getPropertyValue和getPropertyCSSValue
从长相上看getPropertyCSSValue与getPropertyValue是近亲，但实际上，getPropertyCSSValue要顽劣的多。
getPropertyCSSValue方法返回一个CSS最初&#20540;(CSSPrimitiveValue)对象(width, height, left, …)或CSS&#20540;列表(CSSValueList)对象(backgroundColor,
fontSize, …)，这取决于style属性&#20540;的类型。在某些特别的style属性下，其返回的是自定义对象。该自定义对象继承于CSSValue对象（就是上面所说的getComputedStyle以及currentStyle返回对象）。
getPropertyCSSValue方法兼容性不好，IE9浏览器不支持，Opera浏览器也不支持（实际支持，只是老是抛出异常）。而且，虽然FireFox中，style对象支持getPropertyCSSValue方法，但总是返回null.
因此，目前来讲，getPropertyCSSValue方法可以先不闻不问。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：68452次
积分：2525
积分：2525
排名：第11214名
原创：192篇
转载：108篇
(5)(2)(1)(6)(1)(15)(9)(17)(107)(31)(60)(5)style，currentStyle，runtimeStyle，getComputedStyle的区别及用法
style，currentStyle，runtimeStyle，getComputedStyle的区别及用法，有需要的朋友可以参考下。样式表有三种方式：内嵌样式（inline Style） ：是写在html标签里面的。内部样式（internal Style Sheet）：是写在HTML的头部。外联样式表（External Style Sheet）：是用link链接到外部css文件。style：标准的样式！可用来查询由html标签的style属性指定的样式。currentStyle：可用来查询/修改外联或者内部样式表中的样式（仅IE、Opera）。代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象&#26684;式和样式。当使用currentStyle做条件判断是，要加上body,document.body.currentStyle，这样才能兼容上IE6,7。runtimeStyle：运行时的样式！如果与style的属性重叠，将覆盖style的属性。代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的&#26684;式和样式之上的对象的&#26684;式和样式。getComputedStyle：用于Firefox、Chrome、Safari、Opera等浏览器，作用与currentStyle相同。currentStyle 指浏览器当前显示的，如果用runtimeStyle 写入新样式，那么这个新样式权重最高，currentStyle的&#20540;亦改为新样式，所以可以说currentStyle是style 和 runtimeStyle 的结合。即运行时就是runtimeStyle ，否则就style 或currentStyle 。用法作用styleobj.style.att只能获取或修改内嵌样式增改top、left等，IE里直接写数&#20540;，Firefox等要加”px”runtimeStyleobj.runtimeStyle.attobj.runtimeStyle[att]能修改（仅添加、修改）三种方式的样式（仅IE）currentStyleobj.currentStyle.attobj.currentStyle[att]能获取（仅获取）三种方式的样式（仅IE）getComputedStylewindow.getComputedStyle(obj, pseudoElt)[att]window.getComputedStyle(obj, pseudoElt).attwindow.getComputedStyle(obj, pseudoElt).getPropertyValue(att)window.getComputedStyle(obj, pseudoElt).getPropertyCSSValue(att)document.defaultView.getComputedStyle(obj,pseudoElt)[att]document.defaultView.getComputedStyle(obj,pseudoElt).attdocument.defaultView.getComputedStyle(obj,pseudoElt).getPropertyValue(att)document.defaultView.getComputedStyle(obj,pseudoElt).getPropertyCSSValue(att)能获取（仅获取）三种方式的样式（除IE）要修改就直接用obj.style.arr当arr为字符串传参时，带中括号 [ ] 的&#26684;式可以识别，而.arr&#26684;式不能识别。getComputedStyle的语法可为以上八种，严&#26684;来说，带上getPropertyValue或getPropertyCSSValue才算是标准吧。其中pseudoElt是指伪元素，如:after, :before, :marker, :line-marker之类的，如果不用伪类，则填null就可以了。getPropertyValue和getPropertyCSSValue有什么区别呢，getPropertyValue返回的是一个string，而getPropertyCSSValue返回的是一个CSS2Properties对象 版权声明：本文为博主原创文章，未经博主允许不得转载。
无相关信息
最新教程周点击榜
微信扫一扫一、style,currentStyle和getComputedStyle的区别
&function getStyle(obj, attr) &
&&&&if(obj.currentStyle) &
&&&&&&&return obj.currentStyle[attr]; &//只适用于IE
&&&&else &
&&&&&&&return getComputedStyle(obj,false)[attr]; &&//只适用于FF,Chrome,Safa
& & return obj.style[attr]; //本人测试在IE和FF下没有用,chrome有用
&window.onload=function() &
&&&&var oDiv=document.getElementByIdx_x('p1'); &
& & //alert(getStyle(oDiv,'width'));
& & alert(getStyle(oDiv,'margin-left'));
//查询了相关资料发现问题如下：
//style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。 &（这里我测试的在IE和FF下没有用，Chrome下有用，所有有歧义）
//currentStyle可以弥补style的不足，但是只适用于IE。
//getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。
//currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。
//如果要设置相应值，应使用style。
二、获取css操作方法
1.用JS修改标签的 class 属性值：document.getElementByIdx_x( "tt" ).className = "txt";&
2.用JS修改标签的 style 属性值：document.getElementByIdx_x( "t2" ).style.color = "red";&
阅读(...) 评论()