width这样读取出来是一个字符串，并且带有单位，但是offsetwidth返回的是一个数值。...

最新推荐文章于 2023-12-22 16:28:01 发布

weixin_30662539

最新推荐文章于 2023-12-22 16:28:01 发布

阅读量307

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/daicygo/p/6289751.html

版权

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset=" utf-8">
 5     <title>未定义</title>
 6     <style type="text/css">
 7         div{
 8             width:100px;
 9             height:100px;
10             border:5px solid red;
11             background-color:green;
12             padding:3px;
13         }
14     </style>
15     <script type="text/javascript">
16         window.οnlοad=function(){
17             var _mytest=document.getElementById("mytest");
18             console.log("fsfs"+document.getElementById("mytest").offsetWidth);
19             console.log("aa"+document.getElementById("mytest").style.width)
20         }
21     </script>
22 </head>
23 <body>
24 <div id="mytest"></div>
25 </body>
26 </html>

，offsetWidth属性可以返回div的宽度，但是style.width并不能够返回此div的宽度。（因为在js中不能直接把获取写在样式表中的样式）
由运行结果也可以看出offsetWidth返回的宽度值包括:border+width+padding

但是如果把样式加载行内，就可以读取到了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7         window.οnlοad=function()
 8         {
 9             var oDiv=document.getElementById('div1');
10             var a=oDiv.style.width;
11             alert(typeof a);
12             alert(a);
13         }
14     </script>
15 </head>
16 <body>
17 <div id="div1" style="width:200px"></div>
18 </body>
19 </html>