好吧,鉴于前端则个行业知识宽度广而深,早期看过高程介绍过的获取元素计算后的最终样式(浏览器显示的最终样式)的方法现在也忘得七七八八了  

  于是百度了一下,看了一下大神张鑫旭的博客,这里写个随笔记录一下,留作记录

  获取元素的样式,我们平常用得最多的方法是 elem.style.xxx属性,此属性既可都又可写,但!它只能获取元素的内嵌样式,所以要获取一个元素的真正样式并不能通过这个方法获取,于是有了下面两个方法:

  

  getComputedStyle : (现代浏览器以及ie9+ 的浏览器适用)

  1、此方法只读不可写

  2、调用时的形式:window.getComputedStyle(元素,伪类);

    此方法的第一个参数是元素的引用,第二个参数是一个伪类属性的名字,如果不需要刻意忽略但为了兼容某些老牌的浏览器还是要用null 填位

    在 firefox 3.6 上使用此方法获取框架样式的时候需要这样写  window.defaultView.getComputedStyle(元素,伪类)

  

  currentStyle : 此方法和上面的方法是一样的,只是它是ie 独有的方法

  1、此方法同样是可读不可写,而且它无法访问伪类属性

  2、调用时的形式直接就是  element.currentStyle

  

  以上两个方法返回的都是元素在浏览器上运行时的样式方法,而要获取某一特定样式属性值就需要一下方法了

   第一个:getPropertyValue(属性名)

      调用的方式就是上面两个方法的后面再调用

      此方法的参数无需是驼峰形式按照 css 属性名的形式写就好

  

   第二个:getAttribute(属性名)

      这个是ie 的方法,ie9 以下的浏览器在调用 currentStyle 这个方法时只能通过这个方法获取特定的样式属性

      而 ie9+ 的浏览器也可以直接调用 getPropertyValue 这个方法获取特定样式属性

      此方法的参数形式必须是驼峰形式

  当然上面这两个方法也可以通过键值的方式去访问,但是浏览器对一些样式属性名存在差异性所以最好还是用上面的两个方法来访问特定属性吧

  

  第三个:getPropertyCssValue

       不过这个方法极多浏览器不支持,慎用!

 

  想更深入理解访问这个链接:http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

【笔记】归纳js getcomputedStyle, currentStyle 以及其相关用法的更多相关文章

  1. 廖雪峰教程笔记:js中map和reduce的用法

    举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaScript的 ...

  2. Js相关用法个人总结

    Js相关用法个人总结  js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...

  3. 笔记-爬虫-js代码解析

    笔记-爬虫-js代码解析 1.      js代码解析 1.1.    前言 在爬取网站时经常会有js生成关键信息,而且js代码是混淆过的. 以瓜子二手车为例,直接请求https://www.guaz ...

  4. Android Studio 学习笔记(一)环境搭建、文件目录等相关说明

    Android Studio 学习笔记(一)环境搭建.文件目录等相关说明 引入 对APP开发而言,Android和iOS是两大主流开发平台,其中区别在于 Android用java语言,用Android ...

  5. 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)

    GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...

  6. js中substring和substr的用法

    js中substring和substr的用法 substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数    ...

  7. 第22篇 js中的this指针的用法

    前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...

  8. Java开发笔记(五十三)关键字final的用法

    前面介绍了多态的相关用法,可以看到一个子类从父类继承之后,便能假借父类的名义到处晃悠.这种机制在正常情况之下没啥问题,但有时为了预防意外发生,往往只接受当事人来处理,不希望它的儿子乃至孙子来瞎掺和.可 ...

  9. slf4j log4j logback关系详解和相关用法

    slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着"拿来主义"的态度,复制粘贴下配 ...

随机推荐

  1. Swift 2.0 自定义cell和不同风格的cell

    昨天我们写了使用系统的cell怎样创建tableView,今天我们再细分一下,就是不同风格的cell,我们怎写代码.先自己创建一个cell,继承于UItableviewcell 我们看看 cell 里 ...

  2. 【译文】用Spring Cloud和Docker搭建微服务平台

    by Kenny Bastani Sunday, July 12, 2015 转自:http://www.kennybastani.com/2015/07/spring-cloud-docker-mi ...

  3. Spark源码分析之Spark-submit和Spark-class

    有了前面spark-shell的经验,看这两个脚本就容易多啦.前面总结的Spark-shell的分析可以参考: Spark源码分析之Spark Shell(上) Spark源码分析之Spark She ...

  4. shell-早间学习,每日一点-5

    http://www.cnblogs.com/liuling/p/2013-8-4-01.htmlhttp://www.cnblogs.com/stephen-liu74/category/32665 ...

  5. 从Angular2路由引发的前后端路由浅谈

    笔者的学习进度比较慢,直到两年以前写的网站都还是以服务端为主导的,即网站的所有视图都由服务器视图模板来渲染,笔者使用的是 DotNet MVC,开发套路就是在Controller里面写Action,在 ...

  6. Linux CentOS下MySQL的安装配置之浅谈

    前期必备安装:VMware虚拟机,CentOS镜像[注意:Linux下使用CentOS   MySQL是不用在官网下载的,只需要配置就OK了] 下面开始正式操作: //CentOS安装MySQL之浅谈 ...

  7. php弱类型语言中的类型判断

    1.php一个数字和一个字符串进行比较或者进行运算时,PHP会把字符串转换成数字再进行比较.PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0. 例如:123abc转换后 ...

  8. Android -- RecyclerView实现顶部吸附效果

    1,先来看一下今天实现的效果: 2,这次的效果是使用ItemDecoration来实践的,来看一看我们的实现吧 第一步:首先添加依赖,由于我们这些数据是请求网络的,所以一下我们添加网络框架依赖.Rec ...

  9. Asp.Net 常用工具类之加密——对称加密DES算法(2)

    又到周末,下午博客园看了两篇文章,关于老跳和老赵的程序员生涯,不禁感叹漫漫程序路,何去何从兮! 转眼毕业的第三个年头,去过苏州,跑过上海,从一开始的凌云壮志,去年背起行囊默默回到了长沙准备买房,也想有 ...

  10. Spring_构造注入

    依赖注入的第二种注入方式:构造器注入 创建带参数的构造方法,参数类型为注入类的类型 项目要先添加spring支持: package com; public class Computer { priva ...