javascript 元素的大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 元素的大小相关的知识，希望对你有一定的参考价值。
1、偏移量
元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小（不包含外边距）。通过下列4个属性可以获取元素的偏移量：
offsetHeight：
offsetWidth:
offsetLeft:元素的左外边框包含元素的左内边距的像素距离；
offsetTop:元素的上外边框至包含元素上内边距的像素距离。
其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。
2、客户区大小
元素的客户区大小，指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个:clientWidth和clientHeight。
其中，clientWidth属性是元素内容区宽度加上左右内边距宽度；clientHeight属性是元素内容区高度加上上下内边距高度。
clientWidth = padding + width；
clientHeight = padding + height；
客户区大小就是元素内部的空间大小，因此滚动条占用的空间不在内。要确定浏览器的视口大小，可以使用document.documentElement或document.body的clientWidth和clientHeight。
3、滚动大小
滚动大小指的是包含滚动内容的元素的大小。有些元素，即使没有执行任何代码也能添加滚动条；但另外一些元素，则需要通过CSS的overflow属性进行设置才能滚动。以下是4个与滚动大小相关的属性。
scrollHeight:在没有滚动条的情况下，元素内容的总高度
scrollWidth:在没有滚动条的情况下，元素内容的总宽度
scrollLeft:被隐藏在内容区域左侧的像素数
scrollTop:被隐藏在内容区域上方区域的像素数
scrollWidth和scrollHeight主要用于确定元素内容的实际大小。通常认为<html>元素是在web浏览器的视口中滚动的元素。因此，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。
以上是关于javascript 元素的大小的主要内容，如果未能解决你的问题，请参考以下文章