js盒子模型
CSS盒子模型 ,margin - border - padding - content
JS盒子模型指的是通过js中提供的一系列属性和方法,获取页面中元素的样式信息值
<div id="box">这是一个盒子</div>
<script>
var box = document.getElementById("box");
console.dir(box)
</script>
内容的高度和宽度: 我们设置的width/height这两个样式就是内容的宽和高; 如果没有设置height值,容器的高度会根据里面内容自己进行适应,这样获取的值就是真是内容的高;如果设置固定的高度了,不管内容是多了还是少了,其实我们内容的高度指的都是设定的那个值;
真是内容的高度和宽度: 这个代指的是实际内容的宽高(和设置的height没有必然的关系),例如:设置高度为200px,如果内容有益处,那么真实内容的高度是把移除内容的高度也加进来
- client系列(当前元素的几个私有属性)
clientWidth/clientHeight: 内容的高度/宽度+左右/上下填充(和内容溢出来没有关系)
clientTop/clientBottom/clientLeft/clientRight: 上/下/左/右边框的的宽度
- offset系列
offsetWidth/offsetHeight: clientWidth/clientHeight+左右/上下边框(和内容溢出来没有关系)
offsetParent: 当前元素的父级参照物
offsetTop/offsetBottom/offsetLeft/offsetRight 当前元素的外边框距离父级参照物的内边框的偏移量
- scroll系列
scrollWidth/scrollHeight: 和我们的clientWidth/clientHeight一模一样(前提是容器中的内容没有溢出的情况下)
如果容器内容有溢出,我们获取的结果是如下规则:
scrollWidth: 真实内容的宽度(包含溢出)+左填充
scrollHeight: 真实内容的高度(包含溢出)+上填充
获取的结果都是约等于值:
因为在同一个浏览器中是否设置了overflow="hidden"对于最终的结果是有影响的; 在不同的浏览器中我们获取到的结果也是不同的
scrollLeft/scrollTop: 滚动条卷去的宽度/高度
关于js盒子模型属性取值的问题
通过这13个属性值获取的结果永远不可能出现小数,都是整数;浏览器获取结果的时候,在原来真实的结果上自动四舍五入
关于浏览器本身的盒子模型信息
clientWidth/clientHeight 是当前浏览器可是窗口的(一屏幕的)宽度/高度
scrollWidth/scrollHeight 是当前页面的额真实宽度和高度(所有屏加起来的宽度和高度)但是是一个约等于的值
不管哪些属性,也不管是什么浏览器,也不管是获取还是设置,想要都兼容的话,需要写两套
// 获取
document.documentElement[attr]||document.body[attr]
// 设置
document.documentElement.scrollTop = 0;
document.document.scrollTop = 0;
// 封装一个关于浏览器盒子模型的方法
// 如果只传递了attr没有传递value,默认的意思是获取样式值
// 如果两个参数都传递了,意思是设置某一样式属性的值
// 不严谨的来说这就是有关于"类的重载":同一个方法,通过传递参数的不同实现了不同的功能
function win(attr, value){
if(typeof value === "undefined"){
// 没有传递value值 -> "获取"
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr] = value;
document.body[attr] = value;
}
win("scrollTop") // -> 获取
win("scrollTop",10) // -> 设置
