getComputedStyle与currentStyle获取元素当前的css样式
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中就获取到对象的左内边距了,兼容性的写法如下:
obj.currentStyle?obj.currentStyle.paddingLeft:getComputedStyle(obj,null).paddingLeft;
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)
可以封装一个方法来调用:
function getStyle(obj,attr){
/* if(obj.currentStyle){
return obj.currentStyle[attr];
} else{
return getComputedStyle(obj)[attr];
}*/
return obj.currentStyle? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
这些方法的缺点:
类似于复合样式:background:等不要获取
单一样式backgroundColor不要用来做判断,因为各个浏览器获得的值的形式不一致,可能为rgb,可能为十六进制,也可能为单词red,black等
在传属性值的时候,不要带有空格,这样获取不到值,只有undefined
不要获取未设置的样式:不兼容
getComputedStyle与currentStyle获取元素当前的css样式的更多相关文章
- js获取元素的外链样式
一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...
- JS获取元素计算过后的样式
获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = wi ...
- getComputedStyle与currentStyle获取样式
转载自:https://segmentfault.com/a/1190000007477785 CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里 ...
- getComputedStyle与currentStyle获取样式(style/class)
今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里的样式,无 ...
- 获取jQuery对象的第N个DOM元素 && table常用css样式
获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...
- 为什么我获取不到这个css样式?js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- JavaScript 获取HTML中的CSS样式的属性以及值的的方法。
<body> <div id="wow" style="font-size:10px; float:left"></div> ...
- 获取元素CSS值之getComputedStyle方法熟悉
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...
- getComputedStyle方法获取元素CSS值
javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...
随机推荐
- MySQL习题1 一对多实例 产品和分类
/* 需求:建立产品和分类表 1.查询每种分类的产品数量,没有产品的分类也要统计.(cname,quantity) 2.根据分类名称查询分类中的所有产品 */ -- ----------------- ...
- FONT 字体颜色大全
用这句代码 替换 AmericanTypewriter-Bold字段就会有不同的字体样式 _typeLabel.font = [UIFont fontWithName:]; Font Family: ...
- Testing Complex Logic with JMeter Beanshell
BeanShell是最先进的JMeter内置组件之一.JMeter具有丰富的内置插件,可满足性能测试的许多需求.例如,在编写一些复杂的测试时,您可能需要一些额外的脚本.在这种情况下,值得使用Beans ...
- 接口测试02 - 无法绕过的json解析
概述: 先瞧一下什么是json.JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式. 它基于ECMAScript(w3c定制的js规范)的一个子集 ...
- python学习之TCP/UDP
TCP/UDP都是网络编程(socket)的两种基于C/S结构的程序. UDP的9999端口与TCP的9999端口可以各自绑定. UDP:非可靠连接速度快,服务器:创建socket 绑定ip和端口后直 ...
- SSAS中处理时经常出现的几种错误
1.[重复属性键的错误]"处理时找到重复的属性键" 当在[属性关系]里指定属性关系后, 就出出现此错误,因为不知道Month值“1”,并不知道是属于哪一年的, 所以需要 ...
- android的handle
Handler的定义: 用来接收子线程发送过来的数据,并利用该数据直接更新主线程的UI. 安卓中,一个应用启动时会开启一个主线程(UI线程),他的责任是负责管理界面中的控件.比如当你点击一个Butt ...
- Java方式配置Spring
概述 本文主要讲的是如何使用Java Bean来配置Spring,而不是用xml来配置Spring. 本文主要是代码,需要注意的都在注释里面. 代码打包下载地址(注:项目使用Maven构建) Java ...
- 一个简易的Http请求转发器
这两天一直再看微信开发,临时在我的电脑搭了个IIS服务器做微信开发,外网也能访问了,关键是,调试太麻烦了!! 我写完代码,要将代码发布到IIS才能接收微信消息,可是在这个过程中,我不知道微信发过来的是 ...
- Jenkins环境搭建(6)-修改自动化测试报告的样式
写在最前: 我遇到一个问题,就是导出数据时,接口返回的数据是乱码,乱码如下图所示.问了开发,说是byte数据.这种情况,将response Data数据写入到报告中的话,在jenkins上运行时,提示 ...