前端学习笔记--style，currentStyle，getComputedStyle的区别和用法

2024-04-27 14:22:20

字体：大中小

来源：转载

供稿：网友

前端学习笔记--style，currentStyle，getComputedStyle的区别和用法

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

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

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

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

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

1 <style type="text/CSS">2      /*这是嵌入样式*/3      .stuff{color:#f90}4 </style>

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

1 <link rel="stylesheet" href="path/style.css" type="text/css">2 3 ============================================4 /*外部样式*/5 @charset "UTF-8";6 .stuff{color:#f90;}

推荐使用第三种方式。

下面该三位主角上场了。

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

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

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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <link href="style.css" rel="stylesheet" type="text/css"/> 7 <style type="text/css"> 8     #stuff{width:300px;} 9 </style>10 <script type="text/javascript">11     window.onload = function(){12         var oDiv = document.getElementById('stuff');13         console.log(oDiv.style.width);14         //alert(oDiv.style.width);15     };16     17 </script>18 </head>19 20 <body>21     <div id="stuff" style="width:400px;"></div>22 </body>23 </html>

外链样式表style.css:

1 @charset "utf-8"; 2 /* CSS Document */ 3 #stuff{width: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即可。

还是那位影评人评论道：