scroll、offset、client三大家族和getBoundingClientRect方法
- 人工智能
- 2025-08-28 11:48:01
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时候，打印100 console.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,而不是border console.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"); //元素左上角相对于视口的横坐标 160 console.log(element.getBoundingClientRect().x); //元素左上角相对于视口的纵坐标 150 console.log(element.getBoundingClientRect().y); //small的box-sizing属性是content-box时候,打印172(100+20*2+16*2); //small的box-sizing属性是border-box时候，打印100 console.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>scroll、offset、client三大家族和getBoundingClientRect方法由讯客互联人工智能栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“scroll、offset、client三大家族和getBoundingClientRect方法”
