style，currentStyle，getComputedStyle的区别和用法

　　层叠样式表的三种形式(三种的叫法不一，按照各自的习惯)：

　　一、内联样式（inline Style）：在HTML标签用style属性设置，是写在Tag里面的，内嵌样式只对所有的Tag有效。如：

　　 <p style="color:#f90;">这是内联样式</p>
二、嵌入样式（internal Style Sheet，内部样式）：是写在HTML的head里面的，内部样式只对所在的网页有效。如：
<style type="text/css">

/*这是嵌入样式*/

.stuff{color:#f90}

</style>

三、外部样式（External Style Sheet）：通过<link>标签设置。如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。如：　

<link rel="stylesheet" href="path/style.css" type="text/css">
 
 ============================================
 /*外部样式*/
 @charset "UTF-8";
.stuff{color:#f90;}
 
推荐使用第三种方式。
 
下面简单介绍一下三种样式：
　　style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。
      currentStyle可以弥补style的不足，但是只适用于IE。
      getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。
 
style：
            它的使用方法是obj.style.attr;
           用下面代码验证了一下，确实如上所说。我使用了三种样式，得到的结果都是内联样式的值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>无标题文档</title>

    <link href="test.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">

        #stuff {
            width: 300px;
        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var oDiv = document.getElementById('stuff');

            console.log(oDiv.style.width);

            alert(oDiv.style.width);

        };


    </script>

</head>

<body>

<div id="stuff" style="width:400px;"></div>

</body>

</html> 外链样式表style.css:
　　#stuff{width:100px;} 
 得到的结果都是400；如果内联样式中<div id="stuff" style="width:400px;"></div>改成<div id="stuff"></div>，则弹出空的窗口。
 
currentStyle：
                         据说它有个强大的后盾MS，也就是说只能在IE浏览器里能用。其他的不好使。
                               它的使用方法是 window.currentStyle["attr']或者window.currentStyle.attr。
                               在IE中获取内嵌样式表中width的 属性值为300px，在Mozilla Firefox中无法通过。
 
getComputedStyle：
                                它的用法是window.getComputedStyle(obj, pseudoElt)["attr']或window.getComputedStyle(obj, pseudoElt).attr。
                                 其中，pseudoElt表示如 :after,:before之类的伪类，如果不用伪类的话设置为null即可。
 

　　　　　　getComputedStyle同currentStyle作用相同，只是兼容性不同。

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

posted on 2016-03-12 13:29 Newbie_小白阅读(717) 评论(0) 收藏举报