一、getComputedStyle兼容IE8以上，范户籍的计算样式的值都是绝对值，没有相对单位(如：width:10em; 它打印出来是160px)

window.getComputedStyle(div,null)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>window.getComputedStyle(div,null)</title>

    <style type="text/css">

        *{margin:0;padding:0}

    </style>

</head>

<body>

<div style="width: 100px; height: 100px; background: red;"></div>

<script type="text/javascript">

    var div = document.getElementsByTagName('div')[0]
    console.log(div.currentStyle.width)//IE独有属性

</script>

<strong>【代码说明】</strong>

<div><strong>getComputedStyle</strong>获取计算机样式</div>

</body>

</html>

效果图：

二、ele.currentStyle 

ele.currentStyle    是IE独有的属性；返回的计算样式的值不是经过转换的绝对值

封装getStyle，如下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>window.getComputedStyle(div,null)</title>

    <style type="text/css">

        *{margin:0;padding:0}

    </style>

</head>

<body>

<div style="width: 100px; height: 100px; background: red;"></div>

<script type="text/javascript">

    var div = document.getElementsByTagName('div')[0]

    //封装

    function getStyle(elem,prop){

        if(window.getComputedStyle){        //如果它存在的话(兼容谷歌)

            return window.getComputedStyle(elem,null)[prop];//prop作为参数字符串传进来，所有得中括号

        }else{

            return elem.currentStyle[prop];   //兼容IE

        }

    }

</script>

</body>

</html>

js计算机样式window.getComputedStyle(ele,null)与的更多相关文章

  1. js计算机样式window.getComputedStyle(ele,null)2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 关于obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property的理解

    首先是obj,style.property 我一直用这个obj.style.property这个属性来修改内联和外联的obj属性,但是从网上看到了obj.style.property居然只能读取内嵌的 ...

  3. 兼容获取元素当前样式 currentStyle || getComputedStyle

    function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputed ...

  4. 原生js获取样式

    js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...

  5. window,getComputedStyle，letter-spacing

       js 拿到element的css样式    window.getComputedStyle(ele,[pseuso)    比如想拿到一个element的背景色 window.getComput ...

  6. window.getComputedStyle()方法的使用及其扩展

    1.window.getComputedStyle()方法返回值 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclaratio ...

  7. JS获取样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JS 操作样式 style

    1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...

  9. 总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

    http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...

随机推荐

  1. /etc/rc5.d/s991local: line25: eject:command not found错误

      使用虚拟机安装centos出现错误,原因是我使用的镜像是最小级别的,没有图形化界面,只有终端窗口 有人用vmware安装minimal centos报错/etc/rc5.d/s99local : ...

  2. 【LA3523 训练指南】圆桌骑士 【双连通分量】

    题意 有n个骑士经常举行圆桌会议,商讨大事.每次圆桌会议至少应有3个骑士参加,且相互憎恨的骑士不能坐在圆桌旁的相邻位置.如果发生意见分歧,则需要举手表决,因此参加会议的骑士数目必须是奇数,以防赞同和反 ...

  3. OC中数组排序总结

    过完节回来,感觉很多东西都生疏了.总结一下数组的排序.应该不会太完美,后续添加补充. OC中的数组排序方法其实不太多,要根据不同的使用场景来使用不同的方法.Foundation框架中一般用到一下几个方 ...

  4. [SoapUI] 获取Cookie，并循环遍历当前Project下所有的Test Suite，Test Case，Test Step，将Cookie传递给这些Test Step

    import com.eviware.soapui.support.types.StringToStringMap //Get all th cookies in the response , her ...

  5. STM32F4通用定时器

    1.基本原理 三种定时器区别 通用定时器功能特点描述 在这里只用输入捕获事件也能获取脉冲个数同时可以只使用它来获取脉冲宽度,比如当捕获到上升沿,马上进入中断,把计数器的值置零,然后等待捕获下降沿的到来 ...

  6. es学习-索引配置

    1.创建一个新的索引并且添加一个配置 2.更新索引配置:(更新分词器为例子) 更新分词器前,一定要关闭索引,然后更新,最后再次开启索引 url:PUT http://127.0.0.1:9200/su ...

  7. Primer 三四五章

    序言 看了看表,再看了看书,2个小时就没啦(又到了吃中饭的时间,O(∩_∩)O哈哈~).一个上午感觉啥也没干呢,不过还是从书上看到了一些东西,对于这些基础的知识,还是有些东西没有记得很深,所以还是花了 ...

  8. SQL compute by 的使用 主要是针对与 GROUP BY 的区别

    GROUP BY子句有个缺点,就是返回的结果集中只有合计数据,而没有原始的详细记录.如果想在SQL SERVER中完成这项工作,可以使用COMPUTE BY子句.COMPTE生成合计作为附加的汇总列出 ...

  9. 设计模式1---单例模式（Singleton pattern）

    单例模式Singleton 面试的时候,问到许多年轻的Android开发他所会的设计模式是什么,基本上都会提到单例模式,但是对 单例模式也是一知半解,在Android开发中我们经常会运用单例模式,所以 ...

  10. Altera SOPC FrameBuffer系统设计教程

    Altera SOPC FrameBuffer系统设计教程 小梅哥编写,未经授权,严禁转载或用于任何商业用途 在嵌入式系统中,LCD屏作为最友好的人机交互方式,被大量的应用到了各个系统中.在基于ARM ...