js中clientHeight,clientWidth,clientLeft,clientTop的使用【学习笔记】

😁 作者简介：一名大四的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：JavaScript小贴士
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气

​🔥​前言：

这里是关于js操作页面元素的使用的笔记,希望可以帮助到大家，欢迎大家的补充和纠正

10.2.2.1，元素可见大小

属性	说明
element.clientHeight	返回元素的可见高度
element.clientWidth	返回元素的可见高度
element.clientLeft	返回元素节点左边框的宽度
element.clientTop	返回元素节点上边框的宽度

element.clientWidth && element.clientHeight
element.clientHeight属性返回元素节点可见部分的高度，element.clientWidth属性返回元素节点可见部分的宽度。这两个属性包含元素的padding值，但是不包含元素的margin值、边框以及滚动条。

element.clientLeft && element.clientTop
element.clientLeft属性等于元素节点左边框的宽度，element.clientTop属性等于网页元素顶部边框的宽度，单位为像素。这两个属性都包括滚动条的宽度，但是不包括margin和padding值，不过几乎不会出现左侧和顶部滚动条的情况。
需要注意：如果元素设置为display: inline，那么它的 element.clientLeft为0

下篇是关于offsetTop等属性使用