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 ...
随机推荐
- LitePal的基本用法
快速配置 1. 引入Jar包或源码 首先我们需要将LitePal的jar包引入到项目当中,可以点击这里查看LitePal的最新版本,选择你需要的下载即可.下载好了jar包之后,把它复制到项目的li ...
- nginx的负载均衡实战
前言 nginx是一个高性能的HTTP和反向代理的服务器.它有三个最基本的功能,一是当做web服务器.二是作为反向代理服务器.三是提供负载均衡(在反向代理基础上),由于它占有内存小,并发能力强,所以在 ...
- .NET Core 微信公众号小程序6种获取UnionID方法,你知道哪几种?
前言 获取UnionID是开发微信公众号/小程序中很有必要的一个环节,特别是针对一个公司拥有多个公众号小程序而推出的机制,实现打通账户一体化,用UnionID来区分多平台的唯一性. 官方的解释:如果开 ...
- Python从入门到精通视频(全60集) ☝☝☝
Python从入门到精通视频(全60集) Python入门到精通 学习 教程 首先,课程的顺序需要调整:一和三主要是介绍学习和布置开发环境的,一介绍的是非VS开发,三介绍的是VS开发.VS2017现在 ...
- 手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝
手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝ 想用python做机器学习吗,是不是在为从哪开始挠头?这里我假定你是新手,这篇文章里咱们一起用Python完成第一个机器学习项目.我会手把手 ...
- DataStructure之线性表以及其实现
线性表 应用:多项式的表示 什么是线性表 多项式表示问题给出的启示: 同一个问题可以有不同的表示(存储)方法 有一类共性问题 : 有序线性序列的租住和管理 “线性表(Linear List)” : 由 ...
- DRF框架学习总结
DRF框架安装配置及其功能概述 Django与DRF 源码视图解析 DRF框架序列化和返序列化 DRF框架serializers中ModelSerializer类简化序列化和反序列化操作 DRF源码s ...
- Vue-CLI项目vuex仓库
0901自我总结 Vue-CLI项目vuex仓库 一.概念 vuex仓库是vue全局的数据仓库,好比一个单例,在任何组件中通过this.$store来共享这个仓库中的数据,完成跨组件间的信息交互. v ...
- 开启sql语句监控
开启sql执行语句监控 set global general_log=on; set global_log_output='table'; 修改mysql配置文件,在[mysqld]中加入 gener ...
- Vue框架构造
Vue 程序结构框架 Vue.js是典型的MVVM框架,什么是MVVM框架,介绍之前我们先介绍下什么是MVC框架 MVC 即 Model-View-Controller 的缩写,就是 模型-视图-控制 ...