js · 11 3 月, 2023 0

javascript获取元素得尺寸——offsetWidth、offsetHeight、clientWidth、clientHeight

在javascript中获取元素得尺寸有两种方法,主要通过clientWidth和clientHeight以及offsetWidth和offsetHeight. 那么这两者有什么区别呢?

我们创建html文件,并通过以上方法获取两个属性得值,查看两者的区别:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>获取元素尺寸方法</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            div {
                font-size: 50px;
                line-height: 50px;
                width: 100px;
                height: 100px;

                border: 1px solid black;
                padding: 5px 0 0 0;
            }
        </style>
    </head>
    <body>
        <div id="demo">你好呀</div>
        <script>
            function getSize(obj) {
                var size = {
                    width: 0,
                    height: 0,
                    widthWithBorder: 0,
                    heightWithBorder: 0,
                };
                if (!obj) {
                    return size;
                }
                if (obj.offsetHeight && obj.offsetWidth) {
                    size.widthWithBorder = obj.offsetWidth;
                    size.heightWithBorder = obj.offsetHeight;
                }
                if (obj.clientHeight && obj.clientWidth) {
                    size.width = obj.clientWidth;
                    size.height = obj.clientHeight;
                }
                return size;
            }
            console.log(getSize(demo));
        </script>
    </body>
</html>

在浏览器中打开以上文件,按f12查看日志输出结果如下:

{
    "width": 100,
    "height": 105,
    "widthWithBorder": 101,
    "heightWithBorder": 106
}

那么对于上面得结果输出,我们可以得出以下结论:

  • offsetWidth得大小包含了:内容区域宽度 + padding左右宽度 + border左右宽度
  • offsetHeight得大小包括:内容区域高度 + padding上下宽度 + border上下宽度
  • clientWidth大小包括:内容区域 + padding左右宽度
  • clientHeight大小包括:内容区域 + padding上下宽度

因此他们主要区别在于包不包含border得宽度,以上就是内容全部。