摘要：由于前端经常会遇到计算位置的问题，那么搞懂等等这些就变得尤为重要。取决于边框的像数值内容区域的宽高，不包括边框宽度值。点击位置距离当前可视区域的，坐标相对于最近的祖先定位元素。
由于前端经常会遇到计算位置的问题，那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要。放上经典图，一张图让你搞懂clientWidth,offsetWidth,scrollHeight~~~
除了这些还有clientX,pageX,screenX等等，再来看下下面的图
下面介绍一下每个字段的含义
clientLeft,clientTop
表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。(取决于边框的像数值？)
clientWidth,clientHeight
内容区域的宽高，不包括边框宽度值。
clientX、clientY
点击位置距离当前body可视区域的x，y坐标
offsetLeft,offsetTop
相对于最近的祖先定位元素。
offsetParent
某元素的父元素 例如：this.offsetParent.tagName.toLowerCase() 得到body...
offsetWidth,offsetHeight
整个元素的尺寸(不包括因为滚动条变宽的宽度，包括滚动条的宽度和高度)
offsetX, offsetY
相对于带有定位的父盒子的x，y坐标
scrollLeft,scrollTop
元素滚动的距离大小
scrollWidth,scrollHeight
整个内容区域的宽度(包括需拉动滚动条隐藏起来的那些部分) scrollWidth = scrollTop+clientWidth
pageX、pageY
对于整个页面来说，包括了被卷去的body部分的长度
screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标
x、y
和screenX、screenY一样
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/99712.html
摘要：包括和属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。网页元素的位置那就是使用方法。就是透过浏览器看内容的这个区域高度。 获取网页的大小 一张网页的全部面积，就是它的大小，通常是由内容和css样式表决定的。浏览器窗口的大小，是在浏览器中看到的那部分网页面积。又叫做viewport...
摘要：和都是相对于内边距边界的。和即为向上滚动时，元素内容区被遮住的那一部分。同理参考中的各种宽高属性 引子 曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我clientHeight和offsetHeight的区别是什么，我当时一脸懵逼，这个问题对于当时的我来说已经完全超纲了...面试结果自然是面试官感谢我来...
摘要：和都是相对于内边距边界的。和即为向上滚动时，元素内容区被遮住的那一部分。同理参考中的各种宽高属性 引子 曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我clientHeight和offsetHeight的区别是什么，我当时一脸懵逼，这个问题对于当时的我来说已经完全超纲了...面试结果自然是面试官感谢我来...
摘要：在中，存在着多的关于高度和宽度的属性，比如等等这么多，傻傻分不清也正常啊。第二问题对象的属性引用的是对象，表示该窗口中当前显示文档的。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。 在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...
阅读 1248·2023-04-25 19:10
阅读 1118·2021-09-10 10:50
阅读 3011·2021-09-02 15:21
阅读 1358·2019-08-30 15:52
阅读 1657·2019-08-30 13:56
阅读 2052·2019-08-30 12:53
阅读 1831·2019-08-28 18:22
阅读 2086·2019-08-26 13:47
