一.概念
1.内容的宽度和高度
我们设置的width/height这两个样式就是内容的宽和高；
● 如果没有设置height值，容器的高度会根据里面内容自适应，这样获取的值就是真实内容的高；
● 如果设置了固定的高度，不管内容是多还是少，其实我们内容的高度值的都是设定的那个值。
2.<span style="color:red">真实</span>内容的宽度和高度
代指的是实际内容的宽高（和我们设置的height没有必然的联系），
如我设置高度为200,如果内容有溢 出，
那么<span style="color:red">真实内容的高度是要把溢出内容的高度</span>也加进来的。
3.js盒子模型属性
在JS中通过相关的属性可以获取(设置)元素的样式信息,
这些属性就是盒子模型属性（基本上都是有关于样式的）
client系列 top left width height scroll系列 top left width height offset系列 top left width height parent
二.client系列
1.clientWidth & clientHeight
- 获取当前元素可视区域的宽高（内容的宽高+左右/上下PADDING）
和内容是否有溢出无关<span style="color:red">(即不包含border值)</span>- 如果设置了<span style="color:red">box-sizing:border-box</span>; 则clientWidth/clientHeight =<span style="color:red">容器宽/高- border</span>
2.clientTop/Left
- 获取(上/左)<span style="color:red">边框的宽度</span>
3.总结
image.png
三.scroll系列
1.scrollWidth & scrollHeight
<span style="color:red">是当前页面的真实宽/高（所有屏加起来的宽/高），但是是一个约等于的值</span>`
容器中内容没有溢出的情况下：和我们的clientWidth/clientHeight一模一样
如果容器中内容有溢出，获取的结果如下规则：
scrollWidth：<span style="color:red">真实内容的宽度（包含溢出）+左填充</span>
scrollHeight：<span style="color:red">真实内容的高度（包含溢出）+上填充</span>
获取到的结果都是“约等于”的值，因为：
同一个浏览器，我们是否设置overflow="hidden"，对于最终的结果是有影响的（滚动条也占据宽度会影响）；
在不同的浏览器中我们获取到的结果也是不相同的
//获取整个页面真实的高度
document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight#### 2.scrollLeft&scrollTop<span style="color:red">（可读写属性）</span> >**滚动条卷去的宽度/高度** > >1.之前我们学习的js盒子模型中：<span style="color:red">client系列/offset系列/scrollWidth/scrollHeight都是“只读”属性</span>->只能通过属性获取值，不能通过属性修改元素的样式 >2.scrollTop/scrollLeft：滚动条卷曲的高度/宽度(这两个属性是唯一“可读写”属性) #### 3.边界值 ```javascript min =0; max = 整个高度的scrollHeight - 一屏幕高度clientHeight
四.offset系列
1.offsetWidth & offsetHeight
- 在client的基础上<span style="color:red">加上border</span>（和内容是否溢出也没有关系）
2.offsetParent
当前元素的父级参照物，在同一个平面中，<span style="color:red">最外层的元素</span>是里面所有元素的父级参照物（<span style="color:red">和html层级结构没有必然的联系</span>）
一般来说一个页面中所有元素的<span style="color:red">父级参照物都是body</span>
<div id="outer"> <div id="inner"> <div id="center"></div> </div> </div> var outer = document.getElementById("outer"), inner = document.getElementById("inner"), center = document.getElementById("center"); console.log(center.offsetParent); //body console.log(inner.offsetParent); //body console.log(outer.offsetParent); //body console.log(document.body.offsetParent); //null
- <span style="color:red">想要改变父级参照物</span>需要通过<span style="color:red">position</span>定位来进行改变:absolute,relative,fixed中任意一个值都可以把父级参照物进行修改
outer.style.position = "relative"; inner.style.position = "relative"; console.log(center.offsetParent); //inner console.log(inner.offsetParent); //outer console.log(outer.offsetParent); //body3.offsetLeft/offsetTop
- <span style="color:red">当前元素</span>（外边框）距离其<span style="color:red">父级参照物</span>（内边框）的偏移距离
console.log(center.offsetLeft); //距离body左偏移距离 console.log(inner.offsetLeft); //距离body左偏移距离 console.log(outer.offsetLeft); //距离body左偏移距离 outer.style.position = "relative"; inner.style.position = "relative"; console.log(center.offsetLeft); //距离inner左偏移距离
- 无论你的父参照物是谁，我就想获取其距离BODY的偏移值
image.png[图片上传失败...(image-326582-1607906039428)]
五.总结
- 我们通过以上这些属性值获取的结果永远不可能出现小数，都是整数；
浏览器获取结果的时候，会在原来真实结果的基础上进行四舍五入。
- 关于浏览器本身盒子的模型信息
clientWidth & clientHeight: 是当前浏览器可视窗口的宽/高（一屏幕的宽/高） scrollWidth/scrollHeight: 是当前页面的真实宽/高（所有屏加起来的宽/高），但是是一个约等于的值
- 宽和高的总结
1.clientWidth & clientHeight：获取当前元素可视区域的宽高（内容的宽高+左右/上下PADDING） //获取当前页面一屏幕(可视区域)的宽度和高度 document.documentElement.clientWidth || document.body.clientWidth document.documentElement.clientHeight || document.body.clientHeight 2.offsetWidth & offsetHeight：在client的基础上加上border（和内容是否溢出也没有关系） 3.scrollWidth & scrollHeight：真实内容的宽高（需要把溢出的内容也算上）+ 左/上PADDING 获取当前页面的真实宽高（包含溢出的部分） document.documentElement.scrollWidth || document.body.scrollWidth document.documentElement.scrollHeight || document.body.scrollHeight
