1.getComputedStyle

　　1.1　用法：

currentStyle获取计算后的样式，也叫当前样式、最终样式。优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。

currentStyle 在ie、opera上是可行的，无法适用于所有浏览器的
getComputedStyle(
obj , false ) 是支持 w3c (FF12、chrome
14、safari)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。

function getStyle(obj, attr) {

　　//ie,ff
     return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj，false)[attr];
}

1.2 异常：

　　Window.getComputedStyle does not implement interface Element"

　　一般是由于传入的参数引起的：例如

　　//抖动的框框pro
        function shakeFn()
        {    
            var _this = this;
            shake(_this, "left", function(){
                shake(_this, "top");
            });
        }

　　尽量不要用this,用对象替代，至于为什么，，有时间再研究。

　　function shakeFn(el){    
        // var _this = this;
        shake(el, "left", function(){
            // shake(el, "top");
        });
    }

2.详解（http://blog.163.com/yx_xie2007/blog/static/1024642532011821103751157/）

Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表，以数组形式返回，并且是readonly的。IE中则用currentStyle代替。

语法：arr_style=window.getComputedStyle(elem_id,ov)

其中ov:伪元素，是否要获取伪元素属性值。如hover,active,link等属性。如果不想获取这些伪元素的属性值请填写为null。

一 个HTMLElement的style属性是一个可读可写的CSS2Properties对象，就好像CSSRule对象的style属性一样。不 过，Window.getComputedStyle() 的返回值是一个CSS2Properties对象，其属性是只读的。

什么是CSS2Properties 对象？具体参考：http://www.w3school.com.cn/xmldom/dom_css2properties.asp

当要读取具体某个css属性时必须使用getPropertyValue或getPropertyCSSValue。

至于getPropertyValue和getPropertyCSSValue有什么区别，getPropertyValue返回的是一个string，而getPropertyCSSValue返回的是一个CSS2Properties对象。可以参考：https://developer.mozilla.org/en/DOM/window.getComputedStyle

例如，下面两个getStyle的输出结果是一样的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试getPropertyCSSValue</title>
<style type="text/css">
#elem {
 position:absolute;
 top:200px;
 left:100px;
 height:100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
 getStyle();
}
/*function getStyle(){
 var container = document.getElementById("elem");
 var str = window.getComputedStyle(container,null).getPropertyValue("height");
 document.getElementById("output").innerHTML = str;
}*/
/*function getStyle(){
 var container = document.getElementById("elem");
 var str = window.getComputedStyle(container,null).getPropertyCSSValue("top").cssText;
 document.getElementById("output").innerHTML = str;
}*/
</script>
</head>

<body>
<div id="elem">dummy</div>
<div id="output"></div>
</body>
</html>

3.style、currentStyle、getComputedStyle区别介绍  （http://www.cnblogs.com/flyjs/archive/2012/02/20/2360502.html）

样式表有三种方式

内嵌样式（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中的. 比如说

1
2
3
4
5
<style>
#mydiv {
     width : 300px;
}
</style>

则:

1
2
3
4
5
6
7
8
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下还可以通过下面的方式获取

1
2
document.defaultView.getComputedStyle(mydiv,null).width;
window.getComputedStyle(mydiv , null).width;

getComputedStyle(and currentStyle)的更多相关文章

  1. getComputedStyle()与currentStyle

    getComputedStyle()与currentStyle计算元素样式 发表于 2011-10-27 由 admin “DOM2级样式”增强了document.defaultView,提供了get ...

  2. 获取css样式，style、getComputedStyle及currentStyle的区别

    样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的 ...

  3. getComputedStyle和currentStyle

    /*alert(div.style.width)*/ //null function getstyle(obj,name){ if(obj.currentStyle) { return obj.cur ...

  4. getComputedStyle与currentStyle

    currentStyle:获取计算后的样式.也叫当前样式.终于样式. 长处:能够获取元素的终于样式.包含浏览器的默认值,而不像style仅仅能获取行间样式.所以更经常使用到. 注意:不能获取复合样式如 ...

  5. getComputedStyle与currentStyle获取样式(style/class)

    今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里的样式,无 ...

  6. getComputedStyle与currentStyle获取样式

    转载自:https://segmentfault.com/a/1190000007477785 CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里 ...

  7. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  8. JS获取元素属性、样式getComputedStyle()和currentStyle方法兼容性问题

    1. getComputedStyle()  方法获取到的是经过计算机/浏览器计算后的样式 getComputedStyle($("#div")).width; 兼容性:IE6 7 ...

  9. getComputedStyle与currentStyle获取元素当前的css样式

    CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里面的,内部样式只对所在的网页有效外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.c ...

随机推荐

  1. 手机端的各种默认样式比如 ios的按钮变灰色

    1.ios按钮变灰色,给按钮加样式: -webkit-appearance: none; 2.有圆角话 ; } 3.去除Chrome等浏览器文本框默认发光边框 input:focus, textare ...

  2. nyoj 99 单词拼接

    点击打开链接 单词拼接 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描述 给你一些单词,请你判断能否把它们首尾串起来串成一串. 前一个单词的结尾应该与下一个单词的道字母相同 ...

  3. Grunt 之 RequireJS

    RequireJs 提供了一个打包工具 r.js,可以将相关的模块打包为一个文件.相关说明:http://www.requirejs.org/docs/optimization.html 将相关的脚本 ...

  4. Android 在程序中动态添加 View 布局或控件

    有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...

  5. 【转】WEB测试到移动测试的转换

    移动互联网的发展毋庸置疑是必然的趋势,我们曾经传统WEB互联网测试的同学,也必然走上移动测试的道路,移动测试与pc测试到底需要怎样的思维转变才能更快的进入移动节奏呢?对比下WEB与移动的测试不同点: ...

  6. apk重新签名

    re-sign.jar中后自动去除签名这个方法,经试验不可用! 1.去除准备重新签名SinaVoice.apk软件本身的签名 将apk文件后缀改为.zip,然后从winrar中删除META-INF文件 ...

  7. python基础set

    1.set set是一个无序的不重复的集合 li=[11,22,33,11] s=set(li) print(s) {11,22,33}  set提供的方法 1.add(self, *args, ** ...

  8. cygwin中运行命令提示command not found的解决方法

    在cygwin下运行ls等linux常见命令时出现“command not found”的提示,原因是环境变量没有配置好,因此只要将环境变量配置正确,即可正常使用.举例说明,cygwin安装在C盘根目 ...

  9. c语言解数独

    来自:http://my.oschina.net/lovewxm/blog/288043?p=1 #include <stdio.h> #include <stdlib.h> ...

  10. MFC启动和关闭线程

    1. 启动线程: CWinThread* AfxBeginThread( 线程函数,this ); 2.通常导致线程终止的两种情况是:控制函数退出或不允许线程完成运行.如果字处理器使用后台打印线程,若 ...