JS盒子模型提供的属性都是当前元素的私有属性
client系列:
clientHeight/clientWidth/clientTop/clientLeft
- clientWidth/clientHeight:内容宽度(高度)+左右(上下)padding的值
- clientTop/clientLeft:上边框的高度(左边框的宽度)
内容是否有益处对于最后的结果是没有任何的影响的
offset系列:
offsetHeight | offsetWidth | offsetTop | offsetLeft | offsetParent
- offsetParent:父级参照物(在同一个水平面上的最外层的元素就是所有元素的父级参照物)
- offsetWidth/offsetHeight:clientWidth(clientHeight)+左右(上下)的边框
- offsetLeft 前元素的外边框距离父级参照物的内边框的左偏移量
内容是否有益处对于最后的结果是没有任何的影响的
scroll系列:
scrollHeight/scrollWidth/scrollTop/scrollLeft
- scrollWidth/scrollHeight:在没有内容溢出的情况下和我们的clientWidth(clientHeight)一模一样
- scrollHeight:在有内容溢出的情况下,我们获取到的值”约等于”:真实内容的高度+上padding(为什么说是约等于呢?因为同一个浏览器,有没有加overflow: hidden;对最后的结果会有影响,还有不同的浏览器获取到的值是不一样的)
- scrollLeft/scrollTop:滚动条卷去的宽度/高度(滑屏的时候需要用)
获取当前浏览器可视窗口(一屏幕)的宽度和高度
document.documentElement.clientWidth
document.documentElement.clientHeight
获取整个网页的实际宽度和高度
document.documentElement.scrollWidth
document.documentElement.scrollHeight
兼容所有的浏览器,必须要写两套获取方式:
document.documentElement.scrollHeight||document.body.scrollHeight
总结
上面的JS盒子模型属性都是“只读的”:只能获取值,但是不能修改值,获取的值为小数的时候,会自动四舍五入
scrollLeft/scrollTop:滚动条卷曲的高度/宽度
这两个属性既可以获取到值,也可以修改他们的值,这两个属性是“可读写的”
- 最小值为0
- 最大值为box.scrollHeight(真实的高度,包含溢出内容)-box.clientHeight(一屏幕的高度)
获取当前浏览器的类型(版本信息)
window.navigator.userAgent