当前位置：首页 > news >正文

scroll、offset、client三大家族和getBoundingClientRect方法

news 2025/8/16 3:51:04

scroll、offset、client三大家族和getBoundingClientRect方法

1.offset(只能读,不能修改）
2.client(只能读,不能修改）
3.scroll滚动家族
4.getBoundingClientRect方法

1.offset(只能读,不能修改）

offsetParent:离当前元素最近的有定位的祖先元素
offsetLeft:当前元素的左边框到offsetParent元素的左边框的距离;
从父亲的padding开始算,父亲的border不算。也就是说offsetLeft不包含offsetParent元素左边框的宽度。
offsetTop:当前元素的上边框到offsetParent元素的上边框的距离;
从父亲的padding开始算,父亲的border不算。也就是说offsetTop不包含offsetParent元素上边框的宽度。
offsetWidth/offsetHeight:
如果当前元素的box-sizing属性是border-box时,offsetWidth/offsetHeight就是该元素的width和height。
如果当前元素的box-sizing属性是content-box时,offsetWidth/offsetHeight就是该元素的width、padding和border之和。

下面来看一个例子:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>body {background-color: blanchedalmond;}.root {width: 600px;height: 600px;position: relative;left: 100px;top: 100px;background-color: red;}.box {margin-left: 50px;//这里会发生嵌套元素外边距塌陷，但只是界面会受影响，对本示例无影响margin-top: 50px;width: 300px;height: 300px;background-color: aqua;}.small {margin-left: 10px;width: 100px;height: 100px;padding: 20px;border: 20px solid green;background-color: hotpink;overflow-y: auto;//box-sizing: border-box;}</style></head><body><div class="root"><div class="box"><div class="small"></div></div></div></body>
</html>

界面如下:
在这里插入图片描述

如上，有三个div。root是最大的div，box是中等的div，small是最小的div(有一个绿色边框)。我们下面来分析一下small这个小div的offsetParent、offsetHeight、offsetLeft分别是什么?

 <script>let element = document.querySelector(".small");//small的box-sizing属性是content-box时候,打印180(100+20*2+20*2);//small的box-sizing属性是border-box时候，打印100console.log(element.offsetHeight);console.log(element.offsetLeft); //50+10=60;console.log(element.offsetParent); //root元素</script>

2.client(只能读,不能修改）

clientWidth
width+paddingLeft+padingRight（不含边框）
clientHeight
width+paddingTop+padingBottom（不含边框）
clientLeft:左边框大小
clientTop:上边框大小

<head><meta charset="UTF-8" /><title>Title</title><style>body {background-color: blanchedalmond;}.root {width: 600px;height: 600px;position: relative;left: 100px;top: 100px;background-color: red;}.box {margin-left: 50px;//这里会发生嵌套元素外边距塌陷，但只是界面会受影响，对本示例无影响margin-top: 50px;width: 300px;height: 300px;background-color: aqua;}.small {margin-left: 10px;width: 100px;height: 100px;padding: 20px;border: 16px solid green;background-color: hotpink;overflow-y: auto;/* box-sizing: border-box; */}</style></head><body><div class="root"><div class="box"><div class="small"></div></div></div><script>let element = document.querySelector(".small");//small的box-sizing属性是content-box时候,打印140(100+20*2);//small的box-sizing属性是border-box时候，打印68(100-16*2)console.log(element.clientHeight); console.log(element.clientLeft); //为16px 左border宽</script></body>

3.scroll滚动家族

scrollWidth元素总宽度(包含由于溢出无法在网页上显示的区域，内容区和内边距，不含边框)
scrollHeight元素总高度(包含由于溢出无法在网页上显示的区域，内容区和内边距，不含边框)
scrollLeft（可读写）
表示当前元素的水平滚动条向右侧滚动的像素数量
scrollTop 元素上面被卷起的高度（可读写）
表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。

下面举一个例子:

  <head><meta charset="UTF-8" /><title>Title</title><style>body {background-color: blanchedalmond;}.root {width: 600px;height: 600px;position: relative;left: 100px;top: 100px;background-color: red;}.box {margin-left: 50px;//这里会发生嵌套元素外边距塌陷，但只是界面会受影响，对本示例无影响margin-top: 50px;width: 300px;height: 300px;background-color: aqua;}.small {margin-left: 10px;width: 100px;height: 100px;padding: 20px;        border: 16px solid green;background-color: hotpink;        overflow-y: auto;}</style></head><body><div class="root"><div class="box"><div class="small"><div style="height: 500px; width: 100%"></div></div></div></div></body>

界面如下:
在这里插入图片描述

如上，有三个div。root是最大的div，box是中等的div，small是有一个绿色边框的div,它内部有一个500px高度的div,所以会出现纵向滚动条。我们下面来分析一下下面的代码:

<script>let element = document.querySelector(".small");// 获取盒子的高度宽度，包括内容区、内边距、不包含边框（包含滚动高度）//500+20*2,打印540，其中20是padding,而不是borderconsole.log(element.scrollHeight); element.addEventListener("scroll", function () {console.log(element.scrollTop);//判断滚动条是否滚动到底了//clientHeight不包含边框if (element.scrollHeight - (element.clientHeight + element.scrollTop) <1) {console.log("滚动条到底了");}});</script>

4.getBoundingClientRect方法

getBoundingClientRect()获取元素位置（全部为只读）。

x：元素左上角相对于视口的横坐标
y：元素左上角相对于视口的纵坐标
height：元素高度
width：元素宽度
left：元素左上角相对于视口的横坐标，与x属性相等
right：元素右边界相对于左边视口的横坐标（等于x + width）
top：元素顶部相对于视口的纵坐标，与y属性相等
bottom：元素底部相对于上边视口的纵坐标（等于y + height）

如下代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>body,html {margin: 0;padding: 0;background-color: blanchedalmond;}.root {width: 600px;height: 600px;position: relative;left: 100px;top: 100px;background-color: red;}.box {margin-left: 50px;margin-top: 50px;width: 300px;height: 300px;background-color: aqua;}.small {margin-left: 10px;width: 100px;height: 100px;padding: 20px;border: 16px solid green;background-color: hotpink;overflow-y: auto;}</style></head><body><div class="root"><div class="box"><div class="small"><div style="height: 500px; width: 100%"></div></div></div></div><script>let element = document.querySelector(".small");//元素左上角相对于视口的横坐标  160console.log(element.getBoundingClientRect().x); //元素左上角相对于视口的纵坐标  150console.log(element.getBoundingClientRect().y); //small的box-sizing属性是content-box时候,打印172(100+20*2+16*2);//small的box-sizing属性是border-box时候，打印100console.log(element.getBoundingClientRect().height);//160,元素左上角相对于视口的横坐标，与`x`属性相等console.log(element.getBoundingClientRect().left); //元素右边界相对于左边视口的横坐标（等于`x + width`）//small的box-sizing属性是content-box时候,打印332(160+172);//small的box-sizing属性是border-box时候，打印260(160+100)console.log(element.getBoundingClientRect().right); </script></body>
</html>