一、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. 封装basedao及动态创建新类型的java数组

    package com.huawei.base; import java.io.Serializable;import java.lang.reflect.Array;import java.lang ...

  2. go_数组

    go语言中数组是值类型 [10]int 和 [20]int 是不同类型,不能用作参数传递 调用func f(arr [10]int)会拷贝数组 go语言一般不用数组用切片slice package m ...

  3. linux shell脚本编程笔记（一）： 构建基本脚本

    1. echo -n str        打印不换行 2. 反引号来圈住命令传入变量 eg: 生成日志文件: #!/bin/bash today=`date +%y%m%d` ls /usr/bin ...

  4. Ubuntu Server 12.04 LTS搭建SVN服务及修改端口

    采用了apache结合svn的方式. 首先安装apache.subversion.svn-apache sudo apt-get install apache2 sudo apt-get instal ...

  5. C 和 CPP 混合代码cmath编译出错

    Visual Studio会将cmath内的一些列函数报错 解决方式:项目->属性->配置属性->C/C++ ->高级->编译为->选择编译为C++代码即可

  6. sqlserver全备份，差异备份和日志备份

      差异备份是以上一个全备为基点,这个期间所有差异数据的备份. 日志备份是基于前一个全备+日志备份为基点,这个期间的事务日志的备份.(日志备份用于确保还原数据库到某个时间点)   在利用全备+日志备份 ...

  7. 搭建自己的MQTT服务器

    搭建自己的MQTT服务器 物联网电子世界 百家号08-2903:04 MQTT协议是广泛应用的物联网协议,使用测试MQTT协议需要MQTT的代理.有两种方法使用MQTT服务,一是租用现成的MQTT服务 ...

  8. vi/vim 消除搜索后的关键字高亮

    使用vi或vim命令搜索某个关键字之后,取消高亮显示的方法 只要输入:noh即可

  9. vmware workstation 12 密钥

    VMware Workstation 12序列号:5A02H-AU243-TZJ49-GTC7K-3C61N

  10. mybatis思维导图（二）

    写在前面 上一篇文章写了mybatis的基本原理和配置文件的基本使用,这一篇写mybatis的使用,主要包括与sping集成.动态sql.还有mapper的xml文件一下复杂配置等.值得注意的是,导图 ...