老朋友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的更多相关文章

  1. (转载)记录函数 getStyle() 获取元素 CSS 样式

    设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...

  2. 转贴:获取元素CSS值之getComputedStyle方法熟悉

    获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...

  3. 利用getComputedStyle方法获取元素css的属性值

    在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...

  4. 获取元素CSS值之getComputedStyle方法熟悉

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...

  5. getComputedStyle方法获取元素CSS值

    javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性.但是,currentStyle在FIrefox和Chrome下不支持,需要用getCo ...

  6. JS获取元素CSS值

    一.getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclara ...

  7. JS获取元素CSS值的各种方法分析

    先来看一个实例:如何获取一个没有设置大小的字体? <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. 获取元素CSS样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JavaScript获取元素CSS计算后的样式

    原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...

随机推荐

  1. 【重构.改善既有代码的设计】14、总结&读后感

    14.总结 首先,这是一本太老的书,很多观点已经被固化或者过时了.但核心观点没有问题,虽然大多数观点已经被认为是理所当然的事情了.   重构的定义 重构分几种: 1.狭义的代码重构   就是本书讲的, ...

  2. TFS使用笔记

    TFS是用来存储文件的服务器,放置不同版本的文件.因此文件的数量和内容因版本不同而不同. 在Fig-00中,服务器和本地的对应文件夹Common下的因版本不一致,所以文件数量是不一致的. Fig-00 ...

  3. java简单的工厂模式

    定义:专门定义一个类来创建其他类的实例,被创建的实例通常都具有共同的父类和接口.意图:提供一个类由它负责根据一定的条件创建某一及具体类的实例 //简单工厂,存在不符合开闭原则的地方,可以在参考抽象工厂 ...

  4. [19/04/13-星期六] 网络编程_基本概念(关注传输层、数据传输,TCP和UDP)

    一.概念 ▪ 什么是计算机网络? 计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统, 网络管理软件及网络通信协议的管理和协调下,实现资源共享和信 ...

  5. 【php】php与mysql初体验

    第一次体验在web站点上使用MySQL数据库,遇到了很多问题,总结如下: 1.安装XAMPP软件后,将文件放到hotdocs文件夹下,要访问其中的文件,使用localhost/XXX/XXX ,路径要 ...

  6. Apollo2.5摄像头安装

    前言:在Apollo美研团队和长沙CiDi团队的支持下,最近完成了Apollo推荐的摄像头AR023ZWDR(Rev663F12)调试,在这里对Apollo的笔记做一个补充,希望以后的开发者不用在踩我 ...

  7. 学习VCL之路(1)

    在TObject类中,有一个Dispatch()方法和一个DefaultHandler()方法,它们都是与消息分发机制相关的. Dispatch()负责将特定的消息分发给合适的消息处理函数.首先它会在 ...

  8. 两个事务 update同一张表出现的死锁问题 (转载)

    引言 近来做省一级计算机一级考试系统的时候,学生端进行大批量判分的时候,出现了这样的问题(事务(进程 ID 262)与另一个进程被死锁在 锁 资源上,并且已被选作死锁牺牲品.请重新运行该事务.): 这 ...

  9. ORA-27300: OS system dependent operation:sendmsg failed with status: 105 ORA-27301: OS failure message: No buffer space available

    早上查看数据库alert日志,发现如下ORA-报错: kgxpvfynet: mtype: 61 process 6460 failed because of a resource problem i ...

  10. orcal 数据库 maven架构 ssh框架 的全xml环境模版 及常见异常解决

    创建maven项目后,毫不犹豫,超简单傻瓜式搞定dependencies(pom.xml 就是maven的依赖管理),这样你就有了所有你要的包 <project xmlns="http ...