问答详情
源自:1-3 实例JS+DOM

问个问题 希望 高手 解答下 万分感谢啊

有 高手 解释下么 offsetWdith和 style.width 之间的区别么  为什么老师的 单张图片  var imgWidth=imgs[0].offsetWidth  而不是用imgs[0].style.width呢???可以 告诉我下么 新手 谢谢啊

提问者:慕姐4424294 2015-10-12 15:05

个回答

  • zavven
    2015-10-12 17:37:32
    已采纳

    楼上回答不完善。offsetWidth获取的是元素盒子模型的宽度,

    即:offsetWidth = width + padding left + padding right + border left + border right;

            style.width = width。

    例子(借用楼上的例子1):

    <!DOCTYPE html>
    <html>
    <head>
    <title> new document </title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
    </head> 
    <body> 
      <div style="width:100px;height:100px;padding:10px;border:5px solid #000;"></div>
    <script type="text/javascript">
      alert(document.getElementsByTagName("div")[0].offsetWidth)    //130
      alert(document.getElementsByTagName("div")[0].style.width)    //100px
    </script>
    </body>
    </html>

    同理,offsetHeight 和 style.height 的区别是一样的。

  • sevencuijian
    2015-10-12 16:43:13

    offsetWdith和 style.width都是获取元素的宽度,但是还是有区别的。

    offsetWidth在任何情况再都可以获取元素的宽度,但是style.width只有在元素有内联样式且样式包含宽度的时候才可以获取到宽度的值,而且前者输出是不带单位的,后者输出是带单位的。

    例子1:

    <!DOCTYPE html>
    <html>
    <head>
    <title> new document </title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
    </head> 
    <body> 
      <div style="width:100px;height:100px;"></div>
    <script type="text/javascript">
      alert(document.getElementsByTagName("div")[0].offsetWidth)    //100
      alert(document.getElementsByTagName("div")[0].style.width)    //100px
    </script>
    </body>
    </html>

    例子2:

    <!DOCTYPE html>
    <html>
    <head>
    <title> new document </title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
    <style>
    div{width:100px;height:100px;}
    </style>
    </head> 
    <body> 
      <div></div>
    <script type="text/javascript">
      alert(document.getElementsByTagName("div")[0].offsetWidth)    //100
      alert(document.getElementsByTagName("div")[0].style.width)    //输出为空
    </script>
    </body>
    </html>

    希望对你有帮助!