【笔记】归纳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/

时间: 2024-10-19 17:45:49

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

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

举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上,就可以用map实现如下: 由于map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果: function pow(x) { return x * x; } var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(pow); // [1, 4,

js用currentStyle和getComputedStyle获取css样式(非行间)

用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle.下面是一个小示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/ht

笔记-Node.js中的核心API之HTTP

最近正在学习Node,在图书馆借了基本关于Node的书,同时在网上查阅资料,颇有收获,但是整体感觉对Node的理解还是停留在一个很模棱两可的状态.比如Node中的模块,平时练习就接触到那么几个,其他的一些模块暂时只会在学习的时候接触到,不常用便就荒废了.正所谓好记心不如烂笔头,多做笔记还是更有利于理解和记忆.自己做的总结也方便回头复习,所以决定踏上漫长的修炼之旅-- Node提供了许多API,其中一些比较重要.这些核心的API是所有Node应用的支柱,你会不停的用到他们. HTTP服务器 Nod

Servlet&amp;Jsp学习笔记归纳图(一)

转载请注明出处!!!版权必究!! 以下是Servlet&Jsp的学笔记归纳图,详细内容以及相关代码会在后面整理完成 后给出 使用的是思维导图工具:MindManager 6 最新版本是2013,有兴趣的自己百度下载,功能更多,安装有点麻烦 以下提供版本6绿色版免安装版下载: http://pan.baidu.com/s/1jGqlnXc 本节思维导图文件下载:http://pan.baidu.com/s/1eQGbMSU Servlet&Jsp学习笔记归纳图(一),布布扣,bubuko.c

Js相关用法个人总结

Js相关用法个人总结  js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr.length;i++) { obj[i] = pushArr[i]; } obj.length = pushArr.length; console.log(obj); //{0:11,1:22,2:33,3:44,4:55,5:66,length:6} 在js中为对象添加属性和方法 var obj = {

笔记-[2]-JS键盘事件.

键盘事件主要有两种: onkeydown:当键盘按下的时候触发 onkeyup:当键盘按键抬起的时候触发 例子: <script type="text/javascript"> window.onload=function(){ var oTxt=document.getElementById('txt'); oTxt.onkeyup=function(ev){ var ev=ev || window.event; if(ev.keyCode==13 &&

【JS学习笔记】js中关于传地址的问题

我觉得初学者应该会遇到很多这样的问题 条件1.不想定义全局变量的时候 条件2.定义了外围变量却又要引用并且修改其中内容的时候 以下转一篇文章 -------------------------------------------------------------------------------------------------------------------------------------------------------- 很多人,包括我,受书本知识消化不彻底的影响,认为 J

笔记-[面向对象]-JS基于面向对象编程-[1]

面向对象(oop):是一种开发过程中,以面向对象的一种编程思维进行开发. 在JS中,我们一般采用的是面向过程的开发. 面向对象的特点:抽象.封装.继承.多态 先看看自定义对象如何写:自定义一个人的对象,人的名字,年龄,或者是说话.在下面,name age是这个人的属性,说话是这个人的一种行为,也可以叫方法.这样也可以理解为一个简单的面向对象的编程.对象从哪里来,如 var arr=new Array();这个就是一个数组的对象,它从js的一个内定的系统方法类来的. 例如:定义一个人的类,每一个人

笔记-[面向对象]-JS基于面向对象编程-[2]

下面是一个类定义私有属性的例子,和如何在类外部调用类内容的私有属性, <script type="text/javascript">var people=function(name,work,address){ var marry=1;//定义一个私有属性 marry  私有属性和私有方法在外部不可以直接调用访问 this.name=name; this.work=work; this.address=address; this.calls=function(){ aler