你一定要知道的HTML元素的height/width/top/left属性clientHeight/clientWidt

今天整理了关于clientHeight/clientWidth,clientTop/clientLeft,offsetHeight/offsetWidth,offsetTop/offsetLeft,scrollHeight/scrollWidth,scrollTop/scrollLeft相关的内容，如有不对，请大家批评指正。

外层div如下：

截屏2021-05-21 10.45.58.png

内容div如下：

截屏2021-05-21 12.00.24.png

clientHeight/clientWidth：容器的宽或高加上padding

计算公式为：css Height/Width + css padding
- clientHeight: height(100px) + padding(30px * 2) = 160px
- clientWidth: width(100px) + padding(30px * 2) = 160px
clientTop/clientLeft: 边框的长度计算公式为：css border width
- clientTop: borderTop(2px)
- clientLeft: borderLeft(2px)

控制台打印如下：

截屏2021-05-21 10.55.20.png

offsetHeight/offsetWidth：元素的边框、内边距和元素的水平滚动条

计算公式为：css Height/Width + css padding + css scroll width + css border
- offsetHeight: height(100px) + padding(30px * 2) + border(2px * 2) = 164px
- offsetWidth: width(100px) + padding(30px * 2) + border(2px * 2) = 164px
offsetTop/offsetLeft: 距离其offsetParent元素的距离此处offsetParent元素为body，margin为20px
- offsetTop: marginTop(20px)
- offsetLeft: marginLeft(20px)

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。

控制台打印如下：

截屏2021-05-21 11.05.16.png

scrollHeight/scrollWidth：和clientHeight/clientTop的值相同

计算公式为：css Height/Width + css padding
- scrollHeight: height(100px) + padding(30px * 2) = 160px
- scrollWidth: width(100px) + padding(30px * 2) = 160px
scrollTop/scrollLeft: 滚动条滚动的距离计算公式为：内容的宽高（height/width + padding + margin + border） - 外部容器的height/width = 滚动到达底部时的scrollTop/scrollLeft
- scrollTop: 200px - 100px = 100px
- scrollLeft: 200px - 100px = 100px

控制台打印如下：

截屏2021-05-21 11.54.07.png

具体代码如下：

<!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>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px; 
            padding: 30px;
            border: 2px solid red;
            margin: 20px;
            overflow: scroll;
        }
        .inner {
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner">
            这里是内容
        </div>
    </div>
</body>
</html>

&Todo

事件处理中的clientX/clientY,layerX/layerY,screenX/screenY,offsetX/offsetY整理。