Element.style 只能获取行内样式, 但是不能获取内联样式和外部样式.
例:
html 代码
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- </style>
- </head>
- <body>
- <div id="demo" style="width:200px; height:200px; background-color:blue"></div>
- <p > 窗口将会弹出 200px.</p>
- <script>
- var div = document.getElementById("demo");
- alert(div.style.width);
- </script>
- </body>
- </html>
如果将 CSS 放在内联样式中, 弹出窗口的就不是 200px 了, 因为 Element.style 获取不到内联样式, 所以是弹出来的窗口是空白的.
例:
html 代码
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- div{
- width:200px;
- height:200px;
- background-color:blue;
- }
- </style>
- </head>
- <body>
- <div id="demo"></div>
- <p > 窗口将会弹出空白.</p>
- <script>
- var div = document.getElementById("demo");
- alert(div.style.width);
- </script>
- </body>
- </html>
如何获取非行内样式?
IE 浏览器支持 currentStyle 属性, 火狐, 谷歌支持 getComputedStyle 属性. 并且 getComputedStyle 支持 IE9 及以上版本 IE 浏览器.
由此可以进行一个兼容的封装函数:
如:
- [quote]function getStyle(el,value){
- if(window.currentStyle){
- return function(){
- return el.currentStyle[value];
- }
- }else{
- return function(){
- return getComputedStyle(el,null)[value];
- }
- }
- };
- [/quote]
element.style 可以获取样式还可以设置样式, currentStyle 和 getComputedStyle 只可以获取样式不能设置样式.
来源: http://www.qdfuns.com/article/48832/a60c3dd7e9127b1326a5d813d499660e.html