zoukankan      html  css  js  c++  java
  • style,currentStyle,getComputedStyle的区别和用法

    转载于:http://www.it165.net/design/html/201406/2688.html

    在看博客的时候看到了这个这3个家伙-style,currentStyle,getComputedStyle。以前学习的时候没碰到过,既然现在碰到了,就小小的研究了一下。发现了些许问题,也许是时代久远,也有可能是自己孤陋寡闻,但它实实在在的让我感到迷惑。虽说陶渊明说,读书不求甚解,但作为想成为一名优秀前端的前端开发者,还是要弄个明白,要不然睡不着觉啊!

    先做个铺垫吧。说说层叠样式表的三种形式(三种的叫法不一,按照各自的习惯):

    一。内联样式:在HTML标签用style属性设置。如:

     1 <p style="color:#f90;">这是内联样式</p> 

    二。嵌入样式:通过<head>标签内通过<style>标签设置。如:

    1.1 <style type="text/css">
    2.2      /*这是嵌入样式*/
    3.3      .stuff{color:#f90}
    4.4 </style>

    三。外部样式:通过<link>标签设置。如:

    1.1 <link rel="stylesheet" href="path/style.css" type="text/css">
    2.2
    3.3 ============================================
    4.4 /*外部样式*/
    5.5 @charset "UTF-8";
    6.6 .stuff{color:#f90;}

    推荐使用第三种方式。

    下面该三位主角上场了。

    第一位向我们缓缓走来的是style。它的使用方法是obj.style.attr;某位影评人在他的博客中评价道:

    style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。

    用下面代码验证了一下,确实如上所说。我使用了三种样式,得到的结果都是内联样式的值。

    01.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    02.2 <html xmlns="http://www.w3.org/1999/xhtml">
    03.3 <head>
    04.4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    05.5 <title>无标题文档</title>
    06.6 <link href="style.css" rel="stylesheet" type="text/css"/>
    07.7 <style type="text/css">
    08.8     #stuff{300px;}
    09.9 </style>
    10.10 <script type="text/javascript">
    11.11     window.onload = function(){
    12.12         var oDiv = document.getElementById('stuff');
    13.13         console.log(oDiv.style.width);
    14.14         //alert(oDiv.style.width);
    15.15     };
    16.16    
    17.17 </script>
    18.18 </head>
    19.19
    20.20 <body>
    21.21     <div id="stuff" style="400px;"></div>
    22.22 </body>
    23.23 </html>

    外链样式表style.css:

     1 @charset "utf-8"; 2 /* CSS Document */ 3 #stuff{100px;} 

    得到的结果是400px.

    \

    紧跟在style之后的是currentStyle,据说它有个强大的后盾MS,也就是说这家伙只能在IE浏览器里能用。其他的不好使。它的使用方法是window.currentStyle["attr']或者window.currentStyle.attr。在IE中获取内嵌样式表中width的属性值为300px,在Mozilla Firefox中无法通过。

    \                                    \

    最后一位走来的是getComputedStyle,它的用法是window.getComputedStyle(ob, pseudoElt)["attr']或window.getComputedStyle(ob, pseudoElt).attr。其中,pseudoElt表示如 :after,:before之类的伪类,如果不用伪类的话设置为null即可。

    还是那位影评人评论道:

    getComputedStyle同currentStyle作用相同,但是适用于FF、opera、safari、chrome。

    抱着怀疑的态度,我又验证了一下,果然IE7,IE8,IE9都报错了:

    对象不支持“getComputedStyle”属性或方法

    鷌莰ky浏览器的兼容性问题。浏览器的兼容性问题对于前端开发者来说确实是一个头疼的问题,尤其是罪魁祸首IE6。但是我们不能惧而远之,而是见招拆招,兵来将挡水来土掩。在和它战斗的过程中你会得到很多的乐趣,以及战胜它之后的成就感!!!

    另外说一点:getComputedStyle和currentStyle只能获取属性值,无法设置属性。如果想设置属性值,可是使用ob.style.attr.

    有不对的地方请大家多多指教,在此先谢过了!!

  • 相关阅读:
    HDU 5912 Fraction (模拟)
    CodeForces 722C Destroying Array (并查集)
    CodeForces 722B Verse Pattern (水题)
    CodeForces 722A Broken Clock (水题)
    CodeForces 723D Lakes in Berland (dfs搜索)
    CodeForces 723C Polycarp at the Radio (题意题+暴力)
    CodeForces 723B Text Document Analysis (水题模拟)
    CodeForces 723A The New Year: Meeting Friends (水题)
    hdu 1258
    hdu 2266 dfs+1258
  • 原文地址:https://www.cnblogs.com/shaunZh/p/5585733.html
Copyright © 2011-2022 走看看