offset、client、scroll系列

it2025-02-02 9

offset、client、scroll系列的区别

先造三个盒子，并给定样式

#box1 { width: 300px; height: 300px; background-color: rgb(190, 187, 187); margin: 50px; /*解决塌陷*/ overflow: hidden; } #box2 { width: 200px; height: 200px; background-color: rgb(118, 236, 230); margin: 50px; overflow: hidden; border: 5px solid green; padding: 5px; } #box3 { width: 100px; height: 100px; background-color: rgb(231, 229, 73); margin: 50px; }

offset

// box1 console.log(box1.offsetLeft); // 50 console.log(box1.offsetTop); // 50 console.log(box1.offsetWidth); // 400 console.log(box1.offsetHeight); // 400 // box2 console.log(box2.offsetLeft); // 100 console.log(box2.offsetTop); // 100 console.log(box2.offsetWidth); // 230 console.log(box2.offsetHeight); // 230 // box3 console.log(box3.offsetLeft); // 165 console.log(box3.offsetTop); // 165 console.log(box3.offsetWidth); // 100 console.log(box3.offsetHeight); // 100

根据输出结果我们可以判断 offsetLeft：表示该盒子左边界距离body的距离 offsetTop：表示该盒子上边界距离body的距离 offsetWidth ：表示该盒子的宽度（含边框和padding值） offsetHeight：表示该盒子的高度（含边框和padding值）

client

// box1 console.log(box1.clientLeft); // 0 console.log(box1.clientTop); // 0 console.log(box1.clientWidth); // 400 console.log(box1.clientHeight); // 400 // box2 console.log(box2.clientLeft); // 5 console.log(box2.clientTop); // 5 console.log(box2.clientWidth); // 220 console.log(box2.clientHeight); // 220 // box3 console.log(box3.clientLeft); // 0 console.log(box3.clientTop); // 0 console.log(box3.clientWidth); // 100 console.log(box3.clientHeight); // 100

根据输出结果我们可以判断 clientLeft：左边框的宽度 clientTop：上边框的宽度 clientWidth：表示盒子宽度（包含padding值，但不计算边框） clientHeight：表示盒子高度（包含padding值，但不计算边框）

scroll

重新构造一个页面

<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: rgb(56, 56, 41); color: #ffffff; padding: 10px; border: 5px solid #1bc0d6; margin: 100px; overflow: auto; } </style> </head> <body> <div id="box"> 关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。 </div> <script> var box = document.getElementById('box') console.log(box.clientWidth); // 103 计算padding 不算border （不计算滚动条的 17） console.log(box.clientHeight); // 120 console.log(box.scrollHeight); // 440 获取的整个内容的高度，包括隐藏掉的内容 console.log(box.scrollWidth); // 103 计算padding 不算border （不计算滚动条的 17） console.log(box.scrollTop); // 0 console.log(box.scrollLeft); // 0 box.onscroll = function () { console.log(box.scrollTop); // 显示内容划上去的距离 } </script> </body> </html>

根据输出结果我们可以判断 scrollLeft：向左划出去的距离 scrollTop：向上划出去的距离 scrollWidth：盒子的宽度（计算padding 不算border和滚动条） scrollHeight：获取的整个内容的高度，包括隐藏掉的内容

最新回复(0)