老朋友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. ajax post data 获取不到数据

    ajax post  data  获取不到数据,注意 content-type的设置 .post/get关于 jQuery data 传递数据.网上各种获取不到数据,乱码之类的.好吧今天我也遇到了,网 ...

  2. MVC 入门-MvcMovie

    入门教程 ASP.NET MVC 5 入门 https://docs.microsoft.com/zh-cn/aspnet/mvc/overview/getting-started/introduct ...

  3. Protocols, Generics, and Existential Containers — Wait What?

    For the longest time now, I thought that the two functions above were the same. But in actuality, wh ...

  4. 2018.09.15模拟总结(T1,T3)

    过了一周,终于迎来了第二次模拟(这不是期待的语气),看第一周毒瘤程度,我就觉得接下来的模拟只能更毒瘤. 花了10多分钟读完了三道题,觉得暴力还是挺好写的,然后在每一道题都思索那么几分钟后,觉得还是写暴 ...

  5. Java集合源码 -- List列表

    List概述 List是一个有序,可重复的集合,可以在List的中间插入和移除元素,根据整数索引访问元素 下图是List集合的框架图 下面是对上图的简单介绍 AbstractCollection: 提 ...

  6. Owin+ASP.NET Identity浅析系列(五)接入第三方登录

    在今天,读书有时是件“麻烦”事.它需要你付出时间,付出精力,还要付出一份心境.--仅以<Owin+ASP.NET Identity浅析系列>来祭奠那逝去的…… OK,用户角色实现后,我们回 ...

  7. 用 S5PV210 学习 Linux (三) SD卡下载

    学习地址:http://edu.51cto.com/lesson/id-63015.html http://blog.csdn.net/karven_/article/details/52015325 ...

  8. POJ 3762 The Bonus Salary!(最小K覆盖)

    POJ 3762 The Bonus Salary! 题目链接 题意:给定一些任务.每一个任务有一个时间,有k天.一个时间仅仅能运行一个任务,每一个任务有一个价值.问怎么安排能得到最多价值 思路:典型 ...

  9. #ifdef 和 #if defined的区别

    #ifdef 和 #if defined的区别在于,后者可以组成复杂的预编译条件,比如 #if defined (AAA) && defined (BBB)xxxxxxxxx#endi ...

  10. 如何使用jquery.qrcode.js插件生成二维码

    1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http:/ ...