JavaScript getComputedStyle

我们使用 element.style 也可以获取元素的CSS样式声明对象，但是其与 getComputedStyle 方法还是有一些差异的。

首先，element.style 是可读可写的，而 getComputedStyle  为只读。

其次，element.style 只可以获取 style 样式上的属性值，而无法得到所有的 CSS 样式值，什么意思呢？回顾一下 CSS 基础，CSS 样式表的表现有三种方式，

1. 内嵌样式（inline Style） ：是写在 HTML 标签里面的，内嵌样式只对该标签有效。
2. 内部样式（internal Style Sheet）：是写在 HTML 的 <style> 标签里面的，内部样式只对所在的网页有效。
3. 外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以 .CSS 为后缀的 CSS 文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个 CSS 文件。 

而 element.style 只能获取被这些样式表定义了的样式，而 getComputedStyle 能获取到所有样式的值（在不同浏览器结果不一样）

为方便查看，记下。 

    function getStyle(obj, attr){
        if(window.getComputedStyle){
            return getComputedStyle(obj, false)[attr];
        }
        else{
            return obj.currentStyle[attr];      //兼容IE6、7、8
        }
    }
    

 PS：如果使用offsetHeight：

　　　　div.offsetHeight = width + 2倍的内边距 + 2倍的边框

var iDiv = document.getElementById('div');
        iDiv.style.height = parseInt(getStyle(iDiv,"height")) + 10 + 'px';

getStyle();    //获取div的高度  如：100px

使用parseInt（）去掉字符获取数值，然后赋值给height以改变div的高度。

转载于:https://www.cnblogs.com/zapple/p/5854250.html