getComputedStyle与currentStyle获取样式
转载自:https://segmentfault.com/a/1190000007477785
CSS的样式分为三类:
内嵌样式
:是写在标签里面的,内嵌样式只对所在的标签有效内部样式
:是写在HTML
里面的,内部样式只对所在的网页有效外部样式表
:如果很多网页需要用到同样的样式,将样式写在一个以.css
为后缀的CSS
文件里,然后在每个需要用到这些样式的网页里引用这个CSS
文件
getComputedStyle
是一个可以获取当前元素所有最终使用的CSS
属性值,返回的是一个CSS
样式声明对象,只读currentStyle
是IE浏览器的一个属性
基础知识
众所周知,用document.getElementById('element').style.xxx
可以获取element
的xxx
样式信息,可是它获取的只能是DOM元素内嵌样式
style属性里的样式规则,对于使用外部样式表
或内部样式
设置的元素,就获取不到样式信息了。
DOM标准里有个全局方法getComputedStyle
,可以获取到当前对象样式信息,如:getComputedStyle(obj,null).paddingLeft
,就能获取到对象的左内边距。但是IE不支持此方法,IE中获取样式的方法是currentStyle
,不同于全局方法getComputedStyle
,它是作为DOM元素属性存在的,如:obj.currentStyle.paddingLeft,在IE中就获取到对象的左内边距了,兼容性的写法如下:
return obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;
在ie浏览器中,obj.currentStyle是一个对象,而在非ie浏览器中则显示的是undefined,所以可以用以上方法来处理兼容性的问题!!
(判断
obj.currentStyle为真时,执行ie的
currentStyle方法;判断
obj.currentStyle为假时,执行
getComputedStyle(obj,null)方法
)
getComputedStyle
第二个参数表示的是:after
、:before
之类的伪类,如果不用伪类的话设置为null即可。注意的是:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null),不过现在嘛,不是必需参数了
这样,就能在IE及FF中返回对象的当前样式信息了。
特别注意一点:如果要获取当前对象的颜色信息,IE返回的是16进制值
,如:#ffffff
,而其他浏览器返回的是rgb
值,如:rgb(255,255,255)
下面是一个简单的小示例:
①一般简单使用:
②封装代码使用:
兼容性
getComputedStyle
:FireFox、Opera、Safari、Chrome
均支持currentStyle
:仅IE
支持
getComputedStyle与currentStyle获取样式的更多相关文章
- getComputedStyle与currentStyle获取样式(style/class)
今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里的样式,无 ...
- getComputedStyle与currentStyle获取元素当前的css样式
CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里面的,内部样式只对所在的网页有效外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.c ...
- js获取样式、currentStyle和getComputedStyle的兼容写法
currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...
- style、currentStyle、getComputedStyle(不同浏览器获取css样式)区别介绍
style.currentStyle.getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样 ...
- 获取css样式,style、getComputedStyle及currentStyle的区别
样式表有三种: 内嵌样式:<div id="box" style="color:red">box</div>,style写在html中的 ...
- JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...
- style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题
style设置/获取样式的问题:1.js通过style方法 --加样式:加的是行间样式 oDiv.style.width="20"+'px'; --取样式:取得是行间样 ...
- JS之获取样式
基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 原生js获取样式
js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...
随机推荐
- java idea导入ecli项目
转:https://blog.csdn.net/deng11408205/article/details/79723213 1.关闭所有项目:开启idea进入导入项目选项 2.选择.classpath ...
- Linux 平台 tcpdump 抓包
一. 在ecs上准备好mysql客户端命令 二. 开启抓包,抓包方法如下:Linux 平台: 1. 打开一个到ECS的ssh连接,并以root身份登录.在该窗口运行下列命令tcpdump -i any ...
- linux性能监控(转)
vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...
- java pdf转word 高效不失真
将java工程导成jar包 使用 bat 执行 jar 包. --------------------------------------------------------------------- ...
- 关于webpack使用的一些问题
1.镜像安装 npm安装webpack慢的爆炸,如果不能FQ,试下下面的国内良心镜像,浑身都舒爽了. npm config set registry https://registry.npm.taob ...
- CENTOS7上安装MYSQL5.7.21流程
1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置:/data/log/mysql 2下 ...
- 启动tomcat报错com.sun.faces.config.ConfigureListener
小白一个,最近想着上网看看自己搭建个用maven+spring+springmvc+mybaties的框架 然后......就出来这个么东东 java.lang.ClassNotFoundExcept ...
- windows kafka 环境搭建踩坑记
版本介绍(64位): Windows 10 JDK1.8.0_171 zookeeper-3.4.8/ kafka_2.11-0.10.0.1.tgz 点击链接进行下载 1. JDK安装和环境搭建 自 ...
- c++中段自评
不知不觉,学期已过一大半.也是时候对自己的编程水平重新进行一次评估了. 1.通过最近的中段测试和acm新手赛的洗礼,以及之前的课前预习.课中学习.和课后作业的锻炼,我逐渐体会到编程语言的魅力同时也理解 ...
- Spring学习-01
一.Srping 一个轻量级DI.IOC.AOP的容器框架 DI:依赖注入 IOC:控制反转 AOP:面向切面 二.构造器注入 Constructor-arg 属性:index/name/type/r ...