「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」
大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高！上一篇文章是 全年日历展示并设置节假日，全年日历的展示以及设置节假日的功能实现。今天我们一起来学习一下JS的offsetWidth、clientWidth、scrollWidth等相关属性的详细描述。
首先关于 Width 和 Height 的属性
scrollWidth
获取对象的滚动宽度 (包含了元素的宽度,padding和溢出尺寸,不包含margin和border)
document.body.scrollWidth
scrollHeight
获取对象的滚动高度(包含了元素的高度,padding和溢出尺寸,不包含margin和border)
document.body.scrollHeight
offsetWidth
获取对象的宽度 (包含了元素的宽度，padding和border，不包括margin)
document.body.offsetWidth
offsetHeight
获取对象的高度 (包含了元素的高度，padding和border，不包括margin)
document.body.offsetHeight
clientWidth
获取对象可见内容的宽度(包含了元素的宽度,padding,不包含border和margin)
document.body.clientWidth
clientHeight
获取对象可见内容的高度(包含了元素的高度,padding,不包含border和margin)
document.body.clientHeight
style.width
返回元素自身的宽度,不包括padding和margin
style.height
返回元素自身高度,不包括padding和margin
然后是关于 Left 和 Top 的属性
scrollTop
设置/获取位于对象最顶端到对象中可见内容的最顶端之间的距离height + padding，就是元素滚动条向下拉动距离。
document.body.scrollTop
scrollLeft
设置/获取位于对象左边界到对象中可见内容的最左端之间的距离width + padding，就是元素滚动条向左拉动距离。
document.body.scrollLeft
offsetTop
当前对象到其上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。
document.body.offsetTop
offsetLeft
当前对象到其左外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取左外边缘距离文档内壁的距离。
document.body.offsetLeft
总结以上属性（只读、可读写）
只读属性：offsetWidth，offsetHeight，clientWidth，clientHeight，offsetTop，offsetLeft。
可读写属性：style.width，style.heigh，scrollWidth，scrollHeight，scrollTop，scrollLeft。
当鼠标事件发生时（onclick，omousemove，onmouseover）
offsetX
当鼠标事件发生时，鼠标相对于事件源左上角X轴的坐标。
var x = event.offsetX
offsetY
当鼠标事件发生时，鼠标相对于事件源左上角Y轴的坐标。
var y = event.offsetY
screenX
当鼠标事件发生时，鼠标相对于显示器屏幕左上角X轴的坐标；
var x = event.screenX
screenY
当鼠标事件发生时，鼠标相对于显示器屏幕左上角Y轴的坐标；
var y = event.screenY
clientX
当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角X轴的坐标；不随滚动条滚动而改变
var x = event.clientX
clientY
原理同上，不同：左上角Y轴的坐标
var y = event.clientY
pageX
原理同上，不同：左上角X轴的坐标；随滚动条滚动而改变
var x = event.pageX
pageY
原理同上，不同：左上角Y轴的坐标
var y = event.pageY
鼠标事件发生时,相关属性的图片描述
结语：
好了文章到这就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下；希望这篇文章对大家有用,也希望大家多多支持我。 今天是我参与2022首次更文挑战的第26天，加油！
