getComputedStyle/currentStyle/style之间的爱恨情仇
getComputedStyle是?
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。
getComputedStyle() gives the final used values of all the CSS properties of an element.
语法如下:
var style = window.getComputedStyle("元素", "伪类");
例如:var dom = document.getElementById("test"),
style = window.getComputedStyle(dom , ":after");
getComputedStyle与style的区别
- 我们使用element.style也可以获取元素的CSS样式声明对象,但是其与getComputedStyle方法还有有一些差异的。
- 只读与可写
正如上面提到的getComputedStyle
方法是只读的,只能获取样式,不能设置;而element.style
能读能写,能屈能伸。 获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>,getComputedStyle方法返回对象中length属性值(如果有)就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。
- 只读与可写
getComputedStyle兼容性
对于桌面设备:
Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本支持 支持 支持 9 支持 支持
伪类元素支持 支持 支持 不支持 不支持 支持
对于手机设备:Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本支持 支持 支持 WP7 Mango 支持 支持
伪元素支持 ? ? 不支持 ? ?
上面打问号的表示没有测试,是否兼容不知。如果您方便测试,欢迎将测试结果告知,这里将及时更新,并附上您的姓名,以谢您做的贡献。我们先把注意力放在桌面设备上,可以看到,getComputedStyle方法IE6~8是不支持的,得,背了半天的媳妇,发现是孙悟空变的——郁闷了。不急,IE自有自己的一套东西。
getComputedStyle与currentStyle
currentStyle
是IE浏览器自娱自乐的一个属性,其与element.style
可以说是近亲,至少在使用形式上类似,element.currentStyle
,差别在于element.currentStyle
返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>
属性等)。因此,从作用上将,
getComputedStyle
方法与currentStyle
属性走的很近,形式上则style
与currentStyle
走的近。不过,currentStyle
属性貌似不支持伪类样式获取,这是与getComputedStyle
方法的差异,也是jQuerycss()
方法无法体现的一点。
getPropertyValue方法
getPropertyValue方法可以获取CSS样式申明对象上的属性值(直接属性名称),例如:
window.getComputedStyle(element, null).getPropertyValue("float");
如果我们不使用getPropertyValue方法,直接使用键值访问,其实也是可以的。但是,比如这里的的float,如果使用键值访问,则不能直接使用getComputedStyle(element, null).float,而应该是cssFloat与styleFloat,自然需要浏览器判断了,比较折腾!使用getPropertyValue方法不必可以驼峰书写形式(不支持驼峰写法),例如:style.getPropertyValue("border-top-left-radius");
兼容性
getPropertyValue方法IE9+以及其他现代浏览器都支持
OK,一涉及到兼容性问题(IE6-8肿么办),感觉头开始微微作痛了~~,不急,IE自由一套自己的套路,就是getAttribute
方法。
getPropertyValue和getAttribute
在老的IE浏览器(包括最新的),getAttribute方法提供了与getPropertyValue方法类似的功能,可以访问CSS样式对象的属性。用法与getPropertyValue类似:
style.getAttribute("float");
注意到没,使用getAttribute方法也不需要cssFloat与styleFloat的怪异写法与兼容性处理。不过,还是有一点差异的,就是属性名需要驼峰写法,如下:style.getAttribute("backgroundColor");
如果不考虑IE6浏览器,貌似也是可以这么写:style.getAttribute("background-color");
getComputedStyle/currentStyle/style之间的爱恨情仇的更多相关文章
- 注解:大话AOP与Android的爱恨情仇
转载:大话AOP与Android的爱恨情仇 1. AOP与OOP的区别 平时我接触多的就是OOP(Object Oriented Programming面向对象).AOP(Aspect Oriente ...
- String、StringBuilder、StringBuffer的爱恨情仇
第三阶段 JAVA常见对象的学习 StringBuffer和StringBuilder类 (一) StringBuffer类的概述 (1) 基本概述 下文以StringBuffer为例 前面我们用字符 ...
- pytorch和tensorflow的爱恨情仇之基本数据类型
自己一直以来都是使用的pytorch,最近打算好好的看下tensorflow,新开一个系列:pytorch和tensorflow的爱恨情仇(相爱相杀...) 无论学习什么框架或者是什么编程语言,最基础 ...
- pytorch和tensorflow的爱恨情仇之张量
pytorch和tensorflow的爱恨情仇之基本数据类型:https://www.cnblogs.com/xiximayou/p/13759451.html pytorch版本:1.6.0 ten ...
- Menu与ActionBar的爱恨情仇
最近在开发一款音乐播放器,在开发过程中遇到了一点小麻烦,通过android API搞清楚了Menu与ActionBar的爱恨情仇,写了个小Demo祭奠一下那些年我们陷进去的坑,有不对的地方请大神们批评 ...
- web移动端fixed布局和input等表单的爱恨情仇 - 终极BUG,完美解决
[问题]移动端开发,ios下当fixed属性和输入框input(这里不限于input,只要可以调用移动端输入法的都包括,如:textarea.HTML5中contenteditable等),同时存在的 ...
- 除了love和hate,还能怎么表达那些年的“爱恨情仇”?
实用英语 帮你全面提高英语水平 关注 童鞋们每次刷美剧的时候,相信都会被CP感满满的男女主角虐得体无完肤吧. 可是,一到我们自己表达爱意或者恨意的时候,却苦于词穷,只会用love, like, hat ...
- 对json的爱恨情仇
本文回想了对json的爱恨情仇. C++有风险,使用需慎重. 本文相关代码在:http://download.csdn.net/detail/baihacker/7862785 当中的測试数据不在里面 ...
- [转帖]探秘华为(一):华为和H3C(华三)的爱恨情仇史!
探秘华为(一):华为和H3C(华三)的爱恨情仇史! https://baijiahao.baidu.com/s?id=1620703498823290828&wfr=spider&fo ...
随机推荐
- [LeetCode] Encode String with Shortest Length 最短长度编码字符串
Given a non-empty string, encode the string such that its encoded length is the shortest. The encodi ...
- python读取excel一例-------从工资表逐行提取信息
在工作中经常要用到python操作excel,比如笔者公司中一个人事MM在发工资单的时候,需要从几百行的excel表中逐条的粘出信息,然后逐个的发送到员工的邮箱中.人事MM对此事不胜其烦,终于在某天请 ...
- 判断是pc端还是手机端,并跳转到相应页面
<!-- 判断浏览器是否为手机端 --> <script> // class ! function(navigator) { var user ...
- call和apply的区别
call和apply都属于function prototype的一个方法. 定义:调用一个方法的对象,以另一个对象替换当前对象. 相同点:两个方法产生的作用是一样的. 不同点:方法传递的参数不同. c ...
- Android 实时监测(监听)网络连接状态变化
http://blog.csdn.net/mxiaoyem/article/details/50708052
- OpenStack从入门到放弃
OpenStack从入门到放弃 目录: 为何选择云计算/云计算之前遇到的问题 什么是云计算 云服务模式 云应用形式 传统应用与云感知应用 openstack及其相关组件介绍 flat/vlan/gre ...
- Ubuntu下运行Shell脚本
将一个脚本保存为带有扩展名的文件,如test.sh, 在终端上输入: chmod +x test.sh 然后输入: test.sh 终端显示: test.sh 找不到命令(后来看了鸟个私房菜,发现这样 ...
- C阅读与学习
征服C指针 C语言接口与实现:创建可重用软件的技术
- 2017年"程序媛和工程狮"绝对不能忽视的编程语言、框架和工具
2017年"程序媛和工程狮"绝对不能忽视的编程语言.框架和工具 在过去的一年里,软件开发行业继续大踏步地向前迈进.回顾 2016 年,我们看到了更多新兴的流行语言.框架和工具, ...
- Twisted随笔
学习了socket后决定尝试使用框架,目标锁定了Twisted. 什么是Twisted? twisted是一个用python语言写的事件驱动的网络框架,他支持很多种协议,包括UDP,TCP,TLS和其 ...