一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）

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

小苏(º﹃º )

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

阅读量2.6k

点赞数 4

分类专栏： javascript 文章标签：定位 css js html javascript

本文链接：https://blog.csdn.net/qq_45850095/article/details/118274530

版权

本文详细介绍了CSS定位属性offsetWidth、offsetHeight、offsetParent、offsetLeft和offsetTop的概念及用法。通过实例分析了这些属性在不同box-sizing设置下的表现，并探讨了它们与定位父元素的关系，帮助读者深入理解元素的布局计算和定位。

摘要由CSDN通过智能技术生成

快速理解offset之间的区别

以下代码均在Chrome浏览器中测试

1.offsetWidth与offsetHeight

1.offsetWidth：元素的布局宽度。
2.offsetHeight：元素的布局高度。
offsetWidth、offsetHeight 的计算：width/height + padding + border

接下来我们看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            padding: 0;
            margin: 0;
        }
        #div {
   
            width: 200px;
            height: 150px;
            background-color: rgb(21, 138, 235);
            border: 30px solid rgb(235, 174, 9);
            padding: 40px;
            margin: 50px;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div id="div"></div>
    <script>
        window.onload = function () {
   
            var oDiv = document.getElementById('div');
            var Width = oDiv.offsetWidth  //340 = width200 + border30 * 2 + padding40 * 2
            var Height = oDiv.offsetHeight //290 = height150 + border30 * 2 + padding40 * 2
            console.log("offsetWidth:"+Width);//offsetWidth:340
            console.log("offsetHeight:"+<

最低0.47元/天解锁文章

小苏(º﹃º )

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）

offsetWidth：元素的布局宽度。offsetHeight：元素的布局高度。offsetWidth、offsetHeight 的计算：width/height + padding + border-width，受 box-sizing 影响。https://juejin.cn/post/6888911624871084046https://juejin.cn/post/6844903586204221447...
复制链接

扫一扫

专栏目录