1.window.getComputedStyle()方法返回值

是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。

语法:var style = window.getComputedStyle("元素", "伪类");  //第二个参数选填  如果不查询伪类的话可以不填或填null

2.window.getComputedStyle()和element.style的区别

window.getComputedStyle() 和 element.styl 的相同点就是二者返回的都是 CSSStyleDeclaration 对象,取相应属性值得时候都是采用的 CSS 驼峰式写法,均需要注意 float 属性。

而不同点就是:

 a.element.style 读取的只是元素的“内联样式”,即 写在元素的 style 属性上的样式;而 getComputedStyle 读取的样式是最终样式,包括了“内联样式”、“嵌入样式”和“外部样式”。

 b.element.style 既支持读也支持写,我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。

c.我们可以通过使用 getComputedStyle 读取样式,通过 element.style 修改样式

3.兼容性

ie9以下 不支持window.getComputedStyle()  但是可以用element.currentStyle

 比如我们想获取元素的高度  (element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height;

4.defaultView

在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下,这是不需要的, 因为可以直接通过window对象调用。

但有一种情况,你必需要使用 defaultView, 那是在 Firefox 3.6 上访问子框架内的样式 (iframe).

而且除了在 IE8 浏览器中 document.defaultView === window 返回的是 false 外,其他的浏览器(包括 IE9 )返回的都是 true。所以后面直接使用 window 就好,不用在输入那么长的代码了。

window.getComputedStyle()方法的使用及其扩展的更多相关文章

  1. getComputedStyle 方法

    一:getComputedStyle getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...

  2. 获取元素CSS值之getComputedStyle方法熟悉

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...

  3. 利用getComputedStyle方法获取元素css的属性值

    在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...

  4. getComputedStyle方法获取元素CSS值

    javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...

  5. window上安装 MongoDB 及其 PHP扩展

    window上安装 MongoDB 及其 PHP扩展   工具/原料   window MongoDB MongoDB 方法/步骤     MongoDB 下载 MongoDB提供了可用于32位和64 ...

  6. 网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法

    你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发 ...

  7. 转贴:获取元素CSS值之getComputedStyle方法熟悉

    获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...

  8. 关于obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property的理解

    首先是obj,style.property 我一直用这个obj.style.property这个属性来修改内联和外联的obj属性,但是从网上看到了obj.style.property居然只能读取内嵌的 ...

  9. 原生js使用getComputedStyle方法获取CSS内部属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style ...

随机推荐

  1. mysql引号与esc键下方键

    navicat导出数据表发现建表语句如下: create table `product_category` ( `category_id` int not null auto_increment, ` ...

  2. 从0开始学FreeRTOS-(列表&列表项)-6

    # FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在FreeRTOS中,列表与列表项使用得非常多,是Free ...

  3. CSS ellipsis 与 padding 结合时的问题

    CSS 实现的文本截断 考察如下代码实现文本超出自动截断的样式代码: .truncate-text-4 { overflow: hidden; text-overflow: ellipsis; dis ...

  4. 最简单的ArcGIS Engine应用程序(下)

    在中篇我们讲到使用OpenFileDialog控件可以添加shp文件.(最简单的ArcGIS Engine应用程序(中)) 添加lyr文件的操作也是大同小异的. using System; using ...

  5. Bran的内核开发教程(bkerndev)-06 全局描述符表(GDT)

    全局描述符表(GDT)   在386平台各种保护措施中最重要的就是全局描述符表(GDT).GDT为内存的某些部分定义了基本的访问权限.我们可以使用GDT中的一个索引来生成段冲突异常, 让内核终止执行异 ...

  6. Hibernate HQL注入与防御(ctf实例)

    遇到一个hql注入ctf题    这里总结下java中Hibernate HQL的注入问题. 0x01 关于HQL注入 Hibernate是一种ORM框架,用来映射与tables相关的类定义(代码) ...

  7. 代码审计-phpcms9任意文件读取

    漏洞文件: /phpcms/modules/content/down.php download函数 这个函数开始几行代码的作用和init函数中的几乎一样,都是从parse_str 解析传入的a_k参数 ...

  8. Java虚拟机类加载器及双亲委派机制

    所谓的类加载器(Class Loader)就是加载Java类到Java虚拟机中的,前面<面试官,不要再问我"Java虚拟机类加载机制"了>中已经介绍了具体加载class ...

  9. 百万年薪python之路 -- 生成器

    1.生成器 #本质就是迭代器 1.1 生成器的构建方式 在python中有三种方式来创建生成器: ​ 1.通过生成器函数 ​ 2.通过生成器推导式 ​ 3.python内置函数或者模块提供 1.2 生 ...

  10. label 标签的 for 属相

    我的github iSAM2016 一开始学html 标签的时候,知道有label 这个标签的,但是并没有注意到他的for 属性的作用,看一下MDN的介绍 for 可标记的 form相关元素的ID,在 ...