一、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. 01 lucene基础 北风网项目培训 Lucene实践课程 系统架构

    Lucene在搜索的时候数据源可以是文件系统,数据库,web等等. Lucene的搜索是基于索引,Lucene是基于前面建立的索引之上进行搜索的. 使用Lucene就像使用普通的数据库一样. Luce ...

  2. Reveal CocoaPods的使用

    Reveal是配合开发者编辑各种用户界面参数一款工具,运行界面如下,模拟器和真机都支持. Reveal使用时中不需要添加其他代码,只需要ios工程加载Reveal.framework,如果是真机需要确 ...

  3. spring4-3-AOP-AspectJ注解-01-简单使用

    1.引入类库 <dependency> <groupId>org.springframework</groupId> <artifactId>sprin ...

  4. MongoDB 那些坑

    MongoDB 是目前炙手可热的 NoSQL 文档型数据库,它提供的一些特性很棒:如自动 failover 机制,自动 sharding,无模式 schemaless,大部分情况下性能也很棒.但是薄荷 ...

  5. Openssl crl2pkcs7命令

    一.简介 crl2pkcs命令用来根据CRL或证书来生成pkcs#7消息.   二.语法 openssl crl2pkcs7 [-inform PEM|DER ] [-outform PEM|DER ...

  6. python时间处理详解-乾颐堂

    1.获取当前时间的两种方法: import datetime,time now = time.strftime("%Y-%m-%d %H:%M:%S") print now now ...

  7. tp5写日志

  8. python3--json反序列化

    # Auther: Aaron Fan # 加载文件中的数据 import json with open('test.txt','r',encoding='utf-8') as f: info = j ...

  9. 实践作业4---DAY4阶段三。

    阶段三:给出结论 这一阶段,我们首先列表从核心功能.细节.用户体验.辅助功能差异化功能.软件的适应性和成长性展开.我们得结论前参考了权威网站数据.并自己也做了相应分析. 结论:经过这么多工作,这个软件 ...

  10. python 中面向对象编程简单总结2

    1.python中继承的特点: (1)总是从一个类继承,默认为object类 (2)不要忘记调用super.__init__方法来初始化父类的方法 def __init__(self,args): s ...