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来获取一个元素计算后的样式值 ...
随机推荐
- Jquery 获取Checkbox值,prop 和 attr 函数区别
总结: 版本 1.6 1.6 1.4 1.4 函数 勾选 取消勾选 勾选 取消勾选 attr('checked') checked undefined true false .prop('checke ...
- 021.3 IO流——字节流-FileInputStream读取字节
内容:文件读取方法,读取方法例子,read(buf)方法中buf的取值,字节流缓冲区对象—提高读取速度/// 文件读取方法:fis.read(),fis.read(buf),具体看例子 例子:文件读取 ...
- python面向对象之类成员
面向对象编程: OOP编程是利用类和对象来创建各种模型来实现对真实世界的描述,使用面向对象编程的原因一方面是因为它可以使程序的维护和扩展变得简单,并可以大大提高程序开发效率.另外,基于面向对象的程序可 ...
- [HNOI2010]公交线路
题目 发现\(n\)比较大,但是\(k,p\)都很小,考虑矩乘使得复杂度倾斜一下 发现所有车的最大间隔都是\(p\),还保证\(k<p\),于是我们可以考虑压下最后\(p\)位的情况 于是设\( ...
- Modal实现页面跳转和控制器数据传递
一.Model跳转的实现 1.新建工程 2.新建View控制器和导航控制器 (1)为拖控件,两个view一个navigation; 如图: (2)view的“GotoTwo”按键添加Segues到Na ...
- POJ3907 Build Your Home
嘟嘟嘟 题意:按逆时针或顺时针给出一个多边形,求面积. 解法:直接套用公式:\(S = \frac{1}{2}|\sum _ {i = 1} ^ {n} {v_i \times v_{i + 1}}| ...
- hdu 1874 Dijkstra算法
先贴个网上找的比较通俗易懂的教程: 2.1Dijkstra算法(非负权,使用于有向图和无向图) Dijkstra算法是典型最短路算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心 ...
- JNI由浅入深_4_JNI基础知识详解
Java Native Interface (JNI)标准是java平台的一部分,它允许Java代码和其他语言写的代码进行交互.JNI 是本地编程接口,它使得在 Java 虚拟机 (VM) 内部运行的 ...
- Factory(工厂)模式
设计模式一 工厂模式Factory 在面向对象编程中, 最通常的方法是一个new操作符产生一个对象实例,new操作符就是用来构造对象实例的.但是在一些情况下, new操作符直接生成对象会带来一些问题. ...
- JAVA类加载和初始化
JAVA类的加载和初始化 一.类的加载和初始化过程 JVM将类的加载分为3个步骤: 1.加载(Load):class文件创建Class对象. 2.链接(Link) 3.初始化(Initialize) ...