JS 中元素的各种位置尺寸宽高

Winge_Fish

于 2017-02-28 22:49:01 发布

阅读量454

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/Winge_Fish/article/details/58702761

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了DOM中与元素尺寸及位置相关的属性，包括style.width、clientWidth、offsetWidth等，以及offsetLeft和offsetTop的用法。通过示例展示了这些属性在不同情况下的具体表现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

offsetLeft[Top]

只读属性当前元素到定位父级的距离，到当前元素的offsetParent的距离

ie7 ：如果自己没有定位，那么offsetLeft[Top]是到body的距离，如果自己有定位，那么offsetLeft[Top]是到offsetParent的距离。

style.width ，clientWidth ，offsetWidth

style.width: 样式宽 width 带单位px
clientWidth：可视区宽样式宽+ padding 不带单位px
offsetWidth：占位宽样式宽+padding+border宽不带单位px

栗子：


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>


    </style>
    <script>
        window.onload = function() {
           var oDiv = document.getElementById('div1');
            alert(oDiv.style.width);  // 100px 样式宽 === width  带单位px
            alert(oDiv.clientWidth);  //120   可视区宽   样式宽+ padding 不带单位px
            alert(oDiv.offsetWidth); // 122   占位宽   样式宽+padding+border宽  不带单位px
        };

    </script>

</head>
<body>
   <div id="div1" style="width: 100px; height: 100px;
   padding: 10px; border: 1px solid red; margin: 10px;">

   </div>
</body>
</html>