window.getComputedStyle()方法的使用及其扩展
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()方法的使用及其扩展的更多相关文章
- getComputedStyle 方法
一:getComputedStyle getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...
- 获取元素CSS值之getComputedStyle方法熟悉
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...
- 利用getComputedStyle方法获取元素css的属性值
在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...
- getComputedStyle方法获取元素CSS值
javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...
- window上安装 MongoDB 及其 PHP扩展
window上安装 MongoDB 及其 PHP扩展 工具/原料 window MongoDB MongoDB 方法/步骤 MongoDB 下载 MongoDB提供了可用于32位和64 ...
- 网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法
你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发 ...
- 转贴:获取元素CSS值之getComputedStyle方法熟悉
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- 关于obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property的理解
首先是obj,style.property 我一直用这个obj.style.property这个属性来修改内联和外联的obj属性,但是从网上看到了obj.style.property居然只能读取内嵌的 ...
- 原生js使用getComputedStyle方法获取CSS内部属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style ...
随机推荐
- mysql引号与esc键下方键
navicat导出数据表发现建表语句如下: create table `product_category` ( `category_id` int not null auto_increment, ` ...
- 从0开始学FreeRTOS-(列表&列表项)-6
# FreeRTOS列表&列表项的源码解读 第一次看列表与列表项的时候,感觉很像是链表,虽然我自己的链表也不太会,但是就是感觉很像. 在FreeRTOS中,列表与列表项使用得非常多,是Free ...
- CSS ellipsis 与 padding 结合时的问题
CSS 实现的文本截断 考察如下代码实现文本超出自动截断的样式代码: .truncate-text-4 { overflow: hidden; text-overflow: ellipsis; dis ...
- 最简单的ArcGIS Engine应用程序(下)
在中篇我们讲到使用OpenFileDialog控件可以添加shp文件.(最简单的ArcGIS Engine应用程序(中)) 添加lyr文件的操作也是大同小异的. using System; using ...
- Bran的内核开发教程(bkerndev)-06 全局描述符表(GDT)
全局描述符表(GDT) 在386平台各种保护措施中最重要的就是全局描述符表(GDT).GDT为内存的某些部分定义了基本的访问权限.我们可以使用GDT中的一个索引来生成段冲突异常, 让内核终止执行异 ...
- Hibernate HQL注入与防御(ctf实例)
遇到一个hql注入ctf题 这里总结下java中Hibernate HQL的注入问题. 0x01 关于HQL注入 Hibernate是一种ORM框架,用来映射与tables相关的类定义(代码) ...
- 代码审计-phpcms9任意文件读取
漏洞文件: /phpcms/modules/content/down.php download函数 这个函数开始几行代码的作用和init函数中的几乎一样,都是从parse_str 解析传入的a_k参数 ...
- Java虚拟机类加载器及双亲委派机制
所谓的类加载器(Class Loader)就是加载Java类到Java虚拟机中的,前面<面试官,不要再问我"Java虚拟机类加载机制"了>中已经介绍了具体加载class ...
- 百万年薪python之路 -- 生成器
1.生成器 #本质就是迭代器 1.1 生成器的构建方式 在python中有三种方式来创建生成器: 1.通过生成器函数 2.通过生成器推导式 3.python内置函数或者模块提供 1.2 生 ...
- label 标签的 for 属相
我的github iSAM2016 一开始学html 标签的时候,知道有label 这个标签的,但是并没有注意到他的for 属性的作用,看一下MDN的介绍 for 可标记的 form相关元素的ID,在 ...