【笔记】归纳js getcomputedStyle, currentStyle 以及其相关用法
好吧,鉴于前端则个行业知识宽度广而深,早期看过高程介绍过的获取元素计算后的最终样式(浏览器显示的最终样式)的方法现在也忘得七七八八了
于是百度了一下,看了一下大神张鑫旭的博客,这里写个随笔记录一下,留作记录
获取元素的样式,我们平常用得最多的方法是 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 以及其相关用法的更多相关文章
- 廖雪峰教程笔记:js中map和reduce的用法
举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaScript的 ...
- Js相关用法个人总结
Js相关用法个人总结 js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...
- 笔记-爬虫-js代码解析
笔记-爬虫-js代码解析 1. js代码解析 1.1. 前言 在爬取网站时经常会有js生成关键信息,而且js代码是混淆过的. 以瓜子二手车为例,直接请求https://www.guaz ...
- Android Studio 学习笔记(一)环境搭建、文件目录等相关说明
Android Studio 学习笔记(一)环境搭建.文件目录等相关说明 引入 对APP开发而言,Android和iOS是两大主流开发平台,其中区别在于 Android用java语言,用Android ...
- 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)
GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...
- js中substring和substr的用法
js中substring和substr的用法 substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数 ...
- 第22篇 js中的this指针的用法
前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { thi ...
- Java开发笔记(五十三)关键字final的用法
前面介绍了多态的相关用法,可以看到一个子类从父类继承之后,便能假借父类的名义到处晃悠.这种机制在正常情况之下没啥问题,但有时为了预防意外发生,往往只接受当事人来处理,不希望它的儿子乃至孙子来瞎掺和.可 ...
- slf4j log4j logback关系详解和相关用法
slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着"拿来主义"的态度,复制粘贴下配 ...
随机推荐
- Ajax 入门之 GET 与 POST 的不同 (2)
在之前的随笔中,本着怀旧的态度总结了一篇 兼容不同浏览器 建立XHR对象的方法: 在建立好XHR对象之后,客户端需要做的就是,将数据以某种方式传递到服务器,以获得相应的响应,在这里, Ajax技术总 ...
- JUC学习笔记--从阿里Java开发手册学习线程池的正确创建方法
前言 最近看阿里的 Java开发手册,上面有线程池的一个建议: [强制]线程池不允许使用 Executors 去创建,而是通过 ThreadPoolExecutor 的方式, 这样的处理方式让写的同学 ...
- 对Unity注入技术最简单的理解和应用
Unity注入技术,我决定最大的作用在于一个项目,尤其是WEB项目在更远其中一个类时,不需要重新生成,直接通过WEBCONFIG文件的修改就可以更改对应关系和功能,实验步骤如下: 1:新建一个接口IS ...
- 如何用js实现自适应,原来只是几行代码的事(╯‵□′)╯︵┻━┻
在javascript写下如下几行: (function (doc, win, undefined) { var docEl = doc.documentElement, ...
- 【转】jqGrid学习之参数
jqGrid参数 名称 类型 描述 默认值 可修改 url string 获取数据的地址 datatype string 从服务器端返回的数据类型,默认xml.可选类型:xml,local,json, ...
- 【Zookeeper】源码分析之网络通信(二)
一.前言 前面介绍了ServerCnxn,下面开始学习NIOServerCnxn. 二.NIOServerCnxn源码分析 2.1 类的继承关系 public class NIOServerCnxn ...
- 每天一个linux命令(52)--wc命令
Linux 系统中的 wc(word count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出 1.命令格式: wc [选项] 文件 2.命令功能: 统计指定文件中的字节数.字 ...
- ViewPager基础入门
效果图: 实现了三个view间的相互滑动 第一个VIEW向第二个VIEW滑动 第二个VIEW向第三个VIEW滑动 ...
- ucGUI的学习小结
前言 做一个小项目时需要实现GUI及相关操作(响应按键).用的SoC的优点是功耗低,但是受限于硬件能力,之前的SDK里并没有对GUI有很好的支持.后面对GUI的界面外观还有一定的要求,就在网上搜了一下 ...
- 使用SSM框架 搭建属于自己的APP二维码合成、解析、下载
最近公司的app上线了,在推广APP的时候出现了一个问题,因为Android和IOS的下载地址不一样,那么在推广的时候就要推广两个二维码,这样比较麻烦,如何简化我们的推广,让IOS用户扫描二维码的时候 ...