JavaScript getComputedStyle

Posted 2020-08-07 前端爱好者

我们使用 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的高度。