style.attr,currentStyle,getComputedStyle获取元素css
老朋友object.style.attr
平常我们都是使用object.style.attr的方式来获取元素的属性,
但是这种方法具有很大的局限性——只能获取内联样式,
而下面的两种方法可以获取到元素的真实样式属性值,不管是不是内联样式
Window.getComputedStyle(element[, pseudoElt])
参数element:指定元素;pseudoElt:可选,所匹配的伪元素
该方法是获取元素的所有样式,并以对象的形式返回,
我们可以采用三种方式获取我们所需要的样式,具体看下面的例子
而对于有"-"字符的属性名,三种方式的表现如下
总结起来就是
border-top |
borderTop |
|
getPropertyValue(“Attr”) |
Yes |
No |
[“Attr”] |
Yes |
Yes |
.Attr |
No |
Yes |
兼容性:
根据MDN上面的描述,现在大部分的浏览器都已经支持这个方法了,
需要注意的一点是这个方法还有另外一种写法
document.defaultView.getComputedStyle
两者用法完全一样,但是在FireFox 3.6中必须采用这种写法,否则会报错
独宠IE的Element.currentStyle
(由于没有IE6的环境- -MDN上面的描述也不够清晰,所以我就直接拿一些大牛总结里面的东西来用了....)
Element.currentStyle返回的是Element元素的所有样式,
并以对象的形式返回(和getComputedStyle相似),
而我们获取我们想要的属性值的时候我们可以用键值,属性的方式取值外,还可以用getAttribute(驼峰表示法的属性名)
最后post一张图
注意 :currentStyle和getComputedStyle返回的属性值是 带单位的 。
参考博客: https://www.cnblogs.com/coco1s/p/5210667.html
#本文有写的不好或不对的地方还请各位指出,一起学习!#
style.attr,currentStyle,getComputedStyle获取元素css的更多相关文章
- (转载)记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- 转贴:获取元素CSS值之getComputedStyle方法熟悉
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- 利用getComputedStyle方法获取元素css的属性值
在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...
- 获取元素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 ...
- JS获取元素CSS值
一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...
- JS获取元素CSS值的各种方法分析
先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...
- 获取元素CSS样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript获取元素CSS计算后的样式
原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...
随机推荐
- 【MyBatis】MyBatis实现CRUD操作
1.实现基本CRUD功能 使用MyBatis对数据完整的操作,也就是CRUD功能的实现.根据之前的内容,要想实现CRUD,只需要进行映射文件的配置. 范例:修改EmpMapper.xml文件,实现CR ...
- CentOS7使用systemctl添加自定义服务
一.简介 Centos7开机第一个程序从init完全换成了systemd这种启动方式,同centos 5 6已经是实质差别.systemd是靠管理unit的方式来控制开机服务,开机级别等功能. 在/u ...
- 省事之通用Makefile模版
现在编译方案都偏爱使用cmake解决问题,这两条做unity插件,还是用Makefile,居然忘得光光,好记性不如烂笔头. 后面,翻箱倒柜找到以前为炼金术写的Makefiel,发现还真是挺好用,贴出来 ...
- eclipse git 解决冲突
1,team->synchronize workspace 2, merge tool 合并本地版本 3,add to git index 4,commit 5,push
- spring mvc 多数据源切换,不支持事务控制[一]
一个项目中需要使用两个数据库,Oracle 和Mysql ,于是参考各个blog,实现此功能.写好后才发现,原来的事务失效了,我去... spring-mybatis.xml 配置 <bean ...
- CentOS7.X安装Redis-4.0.8以及Redis集群搭建
安装redis 安装前的准备 yum install \ vim \ wget \ make \ gcc \ gcc-c++ \ automake \ autoconf \ -y \ 下载解压并安装 ...
- 编程算法 - 数字在排序数组中出现的次数 代码(C)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012515223/article/details/36869869 数字在排序数组中出现的次数 代 ...
- php中session中的反序列
1.php 键名 + 竖线 + 经过 serialize() 函数反序列处理的值2.php_binary 键名的长度对应的 ASCII 字符 + 键名 + 经过 serialize() 函数 ...
- [Python 模块] logging模块、Logger类
logging模块: 标准库里面的logging模块,在前面学习线程安全时曾用来解决print被打断的问题,这里会介绍logging模块的功能. logging模块是线程安全的,不需要客户做任何特殊的 ...
- 移动端h5列表页上拉加载更多
背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...