码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript getComputedStyle

时间:2016-09-08 20:09:29      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

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

JavaScript getComputedStyle

标签:

原文地址:http://www.cnblogs.com/zapple/p/5854250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!