currentStyle&getComputedStyle

currentStyle:获取计算后的样式,也叫当前样式、最终样式。

优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到。
注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等。

alert (oAbc.currentStyle);
非常遗憾的是,这个好使的东西也不能被各大浏览器完美地支持。准确地说,在我测试的浏览器中,IE8和Opera 11弹出了“object CSSStyleDeclaration”;FF 12、chrome 14、safari 5则弹出“undefined”。

虽然currentStyle无法适用于所有浏览器,但是可以根据以上测试的结果来区分开支持、不支持的浏览器,然后再找到兼容的写法。

1 var oAbc = document.getElementById("abc");
2 if(oAbc.currentStyle) {
3         //IE、Opera
4         alert("我支持currentStyle");
5 } else {
6         //FF、chrome、safari
7         alert("我不支持currentStyle");
8 }

其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。

getComputedStyle(obj,false):在FF新版本中只需要第一个参数,即操作对象,第二个参数写“false”也是大家通用的写法,目的是为了兼容老版本的火狐浏览器。

兼容写法:

 1 var oAbc = document.getElementById("abc");
 2 if(oAbc.currentStyle) {
 3         //IE、Opera
 4         //alert("我支持currentStyle");
 5         alert(oAbc.currentStyle.width);
 6 } else {
 7         //FF、chrome、safari
 8         //alert("我不支持currentStyle");
 9         alert(getComputedStyle(oAbc,false).width);
10 }

一个空白页面中body的id=”abc”,测试以上代码,IE和Opera弹出“auto”,其它三款浏览器则弹出“***px”。虽然结果不同,但是可以发现chrome和safari也都和火狐一样,顺利地读取到了属性值。不支持currentStyle的三款浏览器(FF、chrome、safari),都是支持getComputedStyle的。

结果表明:对浏览器是否支持currentStyle的判断 + getComputedStyle,就可以做到兼容各主流浏览器的效果。而且兼容写法并不复杂,你掌握了吗?^_^

支持currentStyle:IE、Opera
支持getComputedStyle:FireFox、Chrome、Safari

注意最后的弹出内容,currentStyle返回浏览器的默认值”auto”,而getComputedStyle则返回具体的值”**px”。这应该是两者的一个小差异,有兴趣的童鞋可以一起交流研究下。

currentStyle&getComputedStyle

时间: 2024-10-20 13:34:06

currentStyle&getComputedStyle的相关文章

用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 <div id="div1" style="width: 100px; height: 100px; background: black"> 2 </div> 2.内部.外部样式表: 内部样式表就是在<head>头部里有<style&

style currentStyle getComputedStyle的区别和用法

先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样式,通过在head标签设置style标签添加样式. <style type="text/css"> .stuff{color:#f90;} </style> 3.外部样式,通过link标签引入外部样式 <link type="text/css&quo

兼容获取元素当前样式 currentStyle || getComputedStyle

function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputedStyle(ele, null)[attr]; }

JavaScript window.getComputedStyle()

一.window.getComputedStyle() getComputedStyle 是一个可以获取当前元素所有最终使用的 CSS 属性值.返回的是一个 CSS 样式声明对象 ([object CSSStyleDeclaration]),只读. 二.getComputedStyle 与 style 的区别 1. 只读与可写 正如上面提到的 getComputedStyle 方法是只读的,只能获取样式,不能设置:而 element.style 能读能写,能屈能伸. 2. 获取的对象范围 get

各种封装----move框架

运动框架 html <div id="div1"></div> js: window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onclick=function(){ move(oDiv,{left:300}); }; }; 使用:move() function move(obj, json, options){    options=options || {};    v

新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了

新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style type="text/css"> .in{ width:200px; height:24px; backg

放弃jQuery,使用原生js吧!

转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用.下面介绍几个原生替换jq的方法. 获取元素 JQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx

move组件

function move(obj,json,time,fn) { var start={}; var dis={}; for (var name in json) { start[name]=parseFloat(getStyle(obj,name)); dis[name]=json[name]-start[name]; } var n=0; var count=Math.floor(time/30); clearInterval(obj.timer);//自定义属性里可以存任何东西 每个ob

7.9随笔

1.三次握手原则 Http协议三次握手过程 TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标示:SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急) Sequence number(顺序号码) Acknow