大家好，欢迎来到IT知识分享网。
项目开发中经常需要用到元素大小，网页高度，视口高度，各种距离等等，本文总结了获取各种宽高、距离的方法。
offset、cilent和scroll三大家族
元素 element
一般情况下，el.scrollWidth/scrollHeight >= el.offsetWidth/offsetHeight >= el.cilentWidth/cilentHeight
先看几张图，来直观了解一下offset、cilent和scroll：
下面正式开讲！！！！
offset 偏移
| 属性系列 | 作用 |
|---|---|
| element.offsetParent | 返回作为该元素带有定位（position非staticde1定位）的父级元素，如果父级均无定位则返回body |
| element.offsetTop | 返回元素距离最近的带有定位的父元素上方的偏移，若都没有则相对body偏移 |
| element.offsetLeft | 返回元素距离最近的带有定位父元素左上框的偏移，若都没有则相对body偏移 |
| element.offsetWidth | 返回自身包括 内容区、padding、滚动条和边框 的宽度，返回数值不带单位 |
| element.offsetHeight | 返回自身包括 内容区、padding、滚动条和边框 的高度，返回数值不带单位 |
- dom元素的position属性默认是static，即遵循文档流的排列方式，是块级元素就占据一行，行内元素则从左到右，从上到下排列，元素间不会重叠排列。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>offset cilent and scroll</title> <style> * {
margin: 0; padding: 0; } .box_Big {
position: relative; width: 200px; height: 200px; background-color: pink; padding-left: 15px; margin-top: 50px; margin-left: 50px; border: 3px solid black; } .box {
position: absolute; width: 100px; height: 100px; padding: 10px; border: 2px solid black; background-color: purple; margin-top: 15px; margin-left: 45px; } </style> </head> <body> <div class="box_Big"> <div class="box"></div> </div> <p class="p1"></p> <p class="p2"></p> <p class="p3"></p> <p class="p4"></p> <script> var box = document.querySelector('.box') var p1 = document.querySelector('.p1') var p2 = document.querySelector('.p2') var p3 = document.querySelector('.p3') var p4 = document.querySelector('.p4') this.p1.innerHTML = 'box的offsetWidth：' + box.offsetWidth + '，offsetHeight：' + box.offsetHeight this.p2.innerHTML = 'box的cilentWidth：' + box.clientWidth + '，cilentHeight：' + box.clientHeight this.p3.innerHTML = 'box的offsetTop：' + box.offsetTop + '，offsetLeft：' + box.offsetLeft this.p4.innerHTML = 'box的cilentTop：' + box.clientTop + '，cilentLeft：' + box.clientLeft </script> </body> </html> 分析： 从结果可以看出
（1）当box_Big设置relative定位时，box相对于box_Big偏移。
（2）当box_Big没有设置定位时，box相对于body偏移。
cilent 可视区域
| 属性系列 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框border的大小 |
| element.cilentLeft | 返回元素左边框border的大小 |
| element.cilentWidth | 返回自身包括 内容区、padding 的宽度，不含滚动条和边框，返回数值不带单位 |
| element.cilentHeight | 返回自身包括 内容区、padding 的高度，不含滚动条边框，返回数值不带单位 |
scroll 溢出区域
| 属性系列 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上侧距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左侧距离，返回数值不带单位 |
| element.scrollWidth | 返回元素自身实际内容context和padding的宽度（包括溢出部分），不含滚动条和边框部分，返回数值不带单位 |
| element.scrollHeight | 返回元素自身实际内容context和padding的宽度（包括溢出部分），不含滚动条和边框部分，返回数值不带单位 |
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {
width: 500px; height: 300px; overflow: scroll; } .box p {
/* width: 600px; */ border: solid 1px #000; margin: 0px; } .header {
position: sticky; top: 0px; background-color: brown; } </style> </head> <body> <div class="father"> <div class="box"> <p class="bg-brown header">我是头部导航栏</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> <p>我是滚动条</p> </div> </div> <p class="p1"></p> <p class="p2"></p> <p class="p3"></p> <script> var box = document.querySelector('.box') var p1 = document.querySelector('.p1') var p2 = document.querySelector('.p2') var p3 = document.querySelector('.p3') this.p1.innerHTML = 'box.offsetWidth：' + box.offsetWidth + '，box.offsetHeight：' + box.offsetHeight this.p2.innerHTML = 'box.cilentwidth：' + box.clientWidth + '，box.cilentHeight：' + box.clientHeight this.p3.innerHTML = 'box.scrollWidth：' + box.scrollWidth + '，box.scrollHeight：' + box.scrollHeight </script> </body> </html> 分析：
从结果可以看出：scrollHeight只是实际内容context的高，与padding、滚动条和border无关。
屏幕 screen
- screenHeight：屏幕高度
- screenAvailHeight：屏幕可用高度（不包括任务栏）
- screenHeight-screenAvailHeight：任务栏高度
浏览器 window
- window.screenY：浏览器窗口相对于屏幕的垂直距离
- window.scrollY：页面垂直滚动距离
- window.outerHeight：浏览器窗口的高度，包括工具栏
- window.innerHeight：浏览器窗口可见部分的高度，不包括工具栏（
全屏时：window.innerHeight = document.body.cilentHeight） - window.outerHeight – window.innerHeight：工具栏高度
来看一下示意图，来更直观了解一下：
注：
- 标准盒子模型（boxing-size: context-box）的width宽height高是context的宽高，没有border边框和padding填充，但是怪异盒子模型（boxing-size: border-box）的宽高包含border和padding
- 当子元素大小超过父元素大小时，一般需要设置overflow属性
（1）当overflow: auto时，只有在内容溢出后才显示滚动条，内容不溢出滚动条不显示。
（2）当overflow: scroll时，隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。且不管有没有溢出内容都会有滚动条，这是与overflow: auto最大不同的地方。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/117989.html
