（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. secureCRT使用退格键（backspace）出现^H解决的方法

    刚新装了python-3.4.1,使用secureCRT连接上去,可是我在进入后,输入回格键时,屏幕显示的是^H,这个让人受不了.最终在网上找到了解决的方法,仅仅要改动一下secureCRT的配置就可 ...

  2. netfilter/iptables 结构要点

    转载请注明:http://blog.csdn.net/yeasy/article/details/44311169 四张表,每一个表有若干链. filter INPUT(路由表决策后,到本机的进程) ...

  3. SQL入门学习2-聚合与排序

    3-1 对表进行聚合查询 聚合函数 所谓聚合,就是将多行汇总为一行. 函数名 功能 COUNT 计算表中的记录数(行数) SUM 计算表中数值列的数据合计值 AVG 计算表中数值列的数据平均值 MAX ...

  4. .Net反编译实战

    原文:.Net反编译实战 当你面对一个已经部署好的网站,功能,性能都非常不给力的时候,你会怎么办? 当你尝试去了解这个网站业务逻辑,代码逻辑和数据库逻辑时却发现根本没有任何资料时你会怎么办? 当你准备 ...

  5. IIS7.0 Appcmd 命令详解

    原文 IIS7.0 Appcmd 命令详解 一:准备工作 APPcmd.exe 位于 C:\Windows\System32\inetsrv 目录 使用 Cd c:\Windows\System32\ ...

  6. Delphi 3D Glscene安装

    GLScene开源库Delphi基于提供OpenGL的3D框架.由GLScene组件,您可以轻松地创建和渲染你的3D幕后.令人奇怪的是,.对于这样一个很好的开源库.该网络无法找到完整的安装说明,甚至G ...

  7. 浅谈Hybrid技术的设计与实现（转）

    前言 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而H5的低成本.高效率.跨平台等特性 ...

  8. 采用xshell链路本地虚拟机Linux

    昨天想安装在自己的机器看Linux.而使用xshell通路.但是这花了很长的时间,于xshell结束所有的提示"Could not connect to '192.168.54.100' ( ...

  9. zoj 3203 Light Bulb，三分之二的基本问题

    Light Bulb Time Limit: 1 Second      Memory Limit: 32768 KB Compared to wildleopard's wealthiness, h ...

  10. c++指针存储应用程序和释放内存的问题

    C++中指针在new和delete操作的时候对内存堆都做了些什么呢.下面解: 1.指针的new操作: 指针在new之后,会在内存堆中分配一个空间.而指针中存放的是这个空间的地址.如: void mai ...