老朋友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. nginx+php+swoole安装记录

    领了台阿里服务器1vCPU 1G,做下测试研究. 系统 centos7,使用yum安装. Nginx yum install nginx ##开启nginx service nginx start 安 ...

  2. [BZOJ 2730][HNOI 2012] 矿场搭建

    2730: [HNOI2012]矿场搭建 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2113  Solved: 979[Submit][Statu ...

  3. [T-ARA][Day by Day]

    歌词来源:http://music.163.com/#/song?id=22704409 作曲 : 金泰贤/赵英秀 [作曲 : 金泰贤/赵英秀] [作曲 : 金泰贤/赵英秀] 作词 : 金泰贤/赵英秀 ...

  4. codeforces 963A Alternating Sum

    codeforces 963A Alternating Sum 题解 计算前 \(k\) 项的和,每 \(k\) 项的和是一个长度为 \((n+1)/k\) ,公比为 \((a^{-1}b)^k\) ...

  5. Android 6.0动态权限申请教程

    转载请标明出处: http://www.cnblogs.com/why168888/p/6580396.html 本文出自:[Edwin博客园] PermissionManage 介绍 如果设备运行的 ...

  6. java继承-final关键词用法

    final关键字特点: 1.可以用来修饰变量.方法.类. 2.修饰的变量是一个常量.一旦被赋值就不能被修改(常量一般都和static关键字配合使用) 3.修饰类代表此类不能被继承4.修饰方法代表次方法 ...

  7. Alpha Scrum3

    Alpha Scrum3 牛肉面不要牛肉不要面 Alpha项目冲刺(团队作业5) 各个成员在 Alpha 阶段认领的任务 林志松:音乐网页前端页面编写,博客发布 林书浩.陈远军:界面设计.美化 吴沂章 ...

  8. 渲染、render与绘制

    渲染是抽象到具体的过程: 抽象:图片信息的描述(比如一条线:两个端点的位置.线粗.颜色等特征): 具体:依据抽象信息得到的可视图片(绘制过程). 渲染是中文翻译的问题,有种添油加醋的感觉.直意就是交与 ...

  9. 【[JSOI2009]火星藏宝图】

    这里是\(sb\)的\(O(nm)\)做法 上一篇题解里写的\(O(nm)\)做法并没有看懂,我真是好菜啊 这是一个用了斜率优化,但是复杂度仍然是\(O(nm)\)的做法 我们还是先写出简单的\(dp ...

  10. 查看oracle中表的索引

    oracle中表的索引信息存在 user_indexes 和 user_ind_columns 两张表里面, 其中, user_indexes 系统视图存放是索引的名称以及该索引是否是唯一索引等信息, ...