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. Java读源码之Object

    前言 JDK版本: 1.8 最近想看看jdk源码提高下技术深度(比较闲),万物皆对象,虽然Object大多native方法但还是很重要的. 源码 package java.lang; /** * Ja ...

  2. SpringCloud系列-利用Feign实现声明式服务调用

    上一篇文章<手把手带你利用Ribbon实现客户端的负载均衡>介绍了消费者通过Ribbon调用服务实现负载均衡的过程,里面所需要的参数需要在请求的URL中进行拼接,但是参数太多会导致拼接字符 ...

  3. 常用的js代码片段

    1.单选框/手风琴 <script> $(document).ready(function(){ $("dd").on("click",functi ...

  4. Python分布式爬虫必学框架Scrapy打造搜索引擎 ✌✌

    Python分布式爬虫必学框架Scrapy打造搜索引擎  ✌✌ (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 第1章 课程介绍 介绍课程目标.通过课程能学习到 ...

  5. HTML5 lufylegend引擎学习(一) -- 剪刀石头布小游戏

    网址:http://www.lufylegend.com/ <!DOCTYPE html> <html> <head> <title>A Little ...

  6. [LUOGU1437] 敲砖块

    题目描述 在一个凹槽中放置了 n 层砖块.最上面的一层有n 块砖,从上到下每层依次减少一块砖.每块砖 都有一个分值,敲掉这块砖就能得到相应的分值,如下图所示. 14 15 4 3 23 33 33 7 ...

  7. html简介(1)

    HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标记语言

  8. python爬取旅游数据+matplotlib简单可视化

    题目如下: 共由6个函数组成: 第一个函数爬取数据并转为DataFrame: 第二个函数爬取数据后存入Excel中,对于解题来说是多余的,仅当练手以及方便核对数据: 后面四个函数分别对应题目中的四个m ...

  9. 百万年薪python之路 -- MySQL数据库之 用户权限

    MySQL用户授权 (来自于https://www.cnblogs.com/dong-/p/9667787.html) 一. 对新用户的增删改 1. 增加用户 : ①. 指定某一个用户使用某一个ip登 ...

  10. windows下Eclipse远程连接linux hadoop远程调试 经验(一)

    环境 Windows 7 64bit JDK 1.6.0_45  (i586) JDK 1.7.0_51  (i586) Eclipse Kepler Eclipse -plugin-1.2.1.ja ...