元素的各种位置，偏移量，大小，滚动。

最新推荐文章于 2023-03-26 11:53:40 发布

原创最新推荐文章于 2023-03-26 11:53:40 发布 · 614 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

37 篇文章

订阅专栏

本文提供了获取网页元素位置及浏览器视口大小的方法，包括通过递归计算元素的偏移量和根据不同浏览器环境适配视口尺寸的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要想知道某个元素在页面上的偏移量，将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。以下两个函数就可以用于分别取得元素的左和上偏移量。

function getElementLeft(element){
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;
 while (current !== null){
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }
 return actualLeft;
}

function getElementTop(element){
 var actualTop = element.offsetTop;
 var current = element.offsetParent;
 while (current !== null){
 actualTop += current. offsetTop;
 current = current.offsetParent;
 }
 return actualTop;
}

客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内。

要确定浏览器视口大小，可以使用 document.documentElement 或 document.body（在 IE7 之前的版本中）的 clientWidth 和 clientHeight。

function getViewport(){
 if (document.compatMode == "BackCompat"){
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 };
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 };
 }
}

在确定文档的总高度时（包括基于视口的最小高度时），必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果。下面就是这样一个例子。

var docHeight = Math.max(document.documentElement.scrollHeight,
 document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
 document.documentElement.clientWidth);

下面这个函数会检测元素是否位于顶部，如果不是就将其回滚到顶部。

function scrollToTop(element){
 if (element.scrollTop != 0){
 element.scrollTop = 0;
 }
}