（1）js中使用obj.style的用法，是为了获得内联样式，即style属性中的值。

如果想获取obj.style.display，但内联样式表中没有定义display，那么将返回一个空的字符串。

（2）使用obj.currentStyle则是为了获得外部（即通过<link>引入）和内部（即<style>中定义)的样式表中的值。

currentStyle 对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为：内嵌样式、样式表规则、HTML 标签属性、HTML 标签的内部定义。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

             #text{

                 width: 200px;

                 height: 30px;

             }

         </style>

         <script type="text/javascript">

             function objClick(obj){

                 alert(obj.style.width);

                 alert(obj.currentStyle.height);

             }

         </script>

     </head>

     <body>

         <div>

             <input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">

         </div>

     </body>

 </html>

注意：只有 IE 和 Opera 支持使用 currentStyle 获取 HTMLElement 的计算后的样式，其他浏览器中不支持。ps:由于忽略了这个条件，一直在chrome下调试，怎么都不起作用，所以浏览器的兼容性，一定要切记。

（3）window.getComputedStyle（obj,null)
Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表，以数组形式返回，并且是readonly的。
参数说明:
第一个参数为要获取计算后的样式的目标元素
第二个参数为期望的伪元素，如 ':after'，':first-letter' 等，而不是伪类如 ':hover' 等。
注意：在 Firefox 中，第二个参数是必须的，如果没有期望的伪元素要设置为 'null'，这与规范的要求相符。在 Chrome Safari Opera 中，第二个参数如果为 'null' 则可以省略。
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

             #text{

                 width: 200px;

                 height: 30px;

             }

         </style>

         <script type="text/javascript">

             function objClick(obj){

                           alert(window.getComputedStyle(obj,null).getPropertyValue("width"));

                           alert(window.getComputedStyle(obj,null).getPropertyCSSValue("width").cssText);

                }

         </script>

     </head>

     <body>

         <div>

             <input type="button" id="text" value="click" style="border:1px solid #f00" onclick="objClick(this)">

         </div>

     </body>

 </html>

经测试：第一种方法，在IE和chrome中通用，第二种，IE下不支持。

style、currentStyle、getComputeStylel的使用的更多相关文章

  1. JavaScript中style, currentStyle和 getComputedStyle的异同

    今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的 ...

  2. js中style,currentStyle和getComputedStyle的区别

    1.style只能获取元素的内联样式,内部样式和外部样式是获取不到的.例子: <div id="test" style="width:100px;height:20 ...

  3. 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  4. style currentStyle getComputedStyle的区别和用法

    先介绍下层叠样式表的三种形式: 1.内联样式,在html标签中style属性设置. <p style="color:#f90">内联样式</p> 2.嵌入样 ...

  5. js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法

    用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...

  6. 浅谈style.,currentStyle,getComputedStyle,getAttribute

    xxx为属性. ele为元素. 1.style.是针对于样式 在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今 ...

  7. 元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect

    1.示例代码 (1)html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. style,currentStyle和getComputedStyle的区别

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对 ...

  9. js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...

  10. 关于对象.style currentstyle 的区别

    对象.style的方式只能获取行内写法的样式,但是外部引入的或者写在head里面的就无法获取,只能用currentstyle.

随机推荐

  1. 使用方便 正则表达式grep,sed，awk（一）

    一些无稽之谈: 对于正则表达式,永远似了解不明白,看到一些代码,脚本定期,awk,sed.心里总有点虚.主要是记不住.平时又没怎么用,也就没总结了. 如今有空,决定总结一下,顺便克服一下看到shell ...

  2. T-SQL性能调整——信息收集

    原文:T-SQL性能调整--信息收集 IO信息(自服务器启动开始) --Database IO analysis WITH IOFORDATABASE AS ( SELECT DB_NAME(VFS. ...

  3. Canvas 生成base64的PNG图片快照，So Amazing!!!

    function canvasSupport(){     return Modernizr.canvas;}function callCanvasApps(){  var canvasOne=doc ...

  4. cocos2dx 制作单机麻将(二)

    cocos2dx 制作单机麻将(二) 打乱麻将顺序2 前面解说了怎样打乱初始给定的麻将牌堆, 另一种是打乱随意给定的麻将牌堆 //混乱扑克2 void RandAppointCardData(BYTE ...

  5. Docker contanier comunication with route

    2台宿主机,hslave1 192.168.1.153, hslave2 192.168.1.154 修改网段 docker0默认网段是172.17.0.0/16,修改154机器的docker0的网段 ...

  6. MySQL 架构

    原文:MySQL 架构 MySQL架构和结构分析 官方架构图: MySQL DB 各模块架构图如下: MySQL安装方式 MySQL初始化 简介:什么是事务: 事务: ACID :  事务确保了银行不 ...

  7. Android Intent机制与常见的用法

    Activity Android于.Activity所有的程序都是必不可少,程都执行在Activity之中.Activity具有自己的生命周期(见http://www.cnblogs.com/feis ...

  8. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    ( ...

  9. JS脚本显示当前日期+星期几[转]

    以下的代码提供了显示当前日期和星期几的实现方法: function writeDateInfo() {         var day="";         var month= ...

  10. 从[java.lang.OutOfMemoryError: Java heap space]恢复

    出现java.lang.OutOfMemoryError: Java heap space该错误或者是程序问题,或者被分配到JVM内存真的是不够的. 一般来说都是能够事前可控解决的. 可是假设不可控的 ...