offsetWidth和clientWidth的区别

最新推荐文章于 2025-04-27 13:42:17 发布

原创最新推荐文章于 2025-04-27 13:42:17 发布 · 463 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

本文详细解析了clientWidth和offsetWidth两个属性的区别，通过实际代码测试，清晰展示了两者分别包含的内容：前者仅包括内容和内边距，而后者还包括边框。此知识点对于前端开发者理解和调整网页布局至关重要。

查阅文档发现这两个属性很相似

element.clientWidth 返回元素的可见宽度。
element.offsetWidth 返回元素的宽度。

在编写代码测试之后发现：
element.clientWidth = content + padding
element.offsetWidth = content + padding + border

// 测试代码

// <style>
        #box1{
            width: 100px;
            height: 100px;
            padding: 100px;
            border:10px red solid;
            background-color: bisque;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var box1 = document.getElementById("box1");
            var cw = box1.clientWidth;
            var ow = box1.offsetWidth;
            console.log(cw);
            console.log(ow);
        }

    </script>
</head>
<body>
    <div id="box1"></div>
</body>