一。JS盒子模型指的是通过JS中提供的一系列的属性和方法,获取页面中元素的样式信息值
<script type="text/javascript">
var box = document.getElementById("box");
console.dir(box);
</script>
#box(有很多自己的私有属性)->
HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype
-> Node.prototype ->
EventTarget.prototype -> Object.prototype
以下面这个盒子作为例子了解一下JS中的盒子模型:
内容的宽度和高度:我们设置的 width / height 这两个样式就是内容的宽和高;如果没有设置height的值,容器的高度会更具里面内容多少自己进行适应,这样获取的值就是真实内容的高;如果固定的高度了,无论内容的多了还是少了,其实我们的内容的高度都是设定的那个值
真实内容的宽度和高度:这个代指的是实际内容的宽高(和我们设置的height没有必然的联系),例如:我们设置的高度为200px,如果内容有溢出,那么真实内容的高度就是把溢出内容的高度也要加进来的
(当前元素的几个私有的属性)
1.client系列
-> clientWidth / clientHeight : 内容的宽度 / 高度 + 左右 / 上下填充padding
-> clientLeft / clientTop : 左 边框的宽度 / 上边框的高度 (border [ Left / Top ] Width)
2.offset系列
-> offsetWidth / offsetHeight : clientWidth / clientHeight + 左右 / 上下边框border
-> offsetParent:当前元素的富集参照物
-> offsetLeft / offsetTop:当前元素的外边框距离富集参照物的内边框的偏移量
3.scroll系列
-> scrollWidth / scrollHeight :和我们的clientWidth / clientHeight 一模一样(前提是:容器中的内容没有溢出的情况下)
-> 如果容器中的内容有溢出,我们获取的结果是如下规则:
scrollWidth :真实内容的宽度(包含溢出) + 左填充padding-left
scrollHeight:真实内容的高度(包含溢出) + 上填充padding-top
-> 获取到的结果都是“约等于”的值,因为:同一个浏览器,我们是否设置overflow: hidden; 对于最终的结果石油影响的,在不同的浏览器中我们取到的结果也是不同的
-> scrollLeft / scrollTop:滚动条卷去的宽度 / 高度
二。关于JS合作司模型属性取值的问题
我们通过这13个属性值获取到的结果永远不可能出现小数,都是整数;浏览器获取结果的时候,在原来真实结果的基础上进行四舍五入
三。关于操作浏览器本身的盒子模型信息
-> clientWidth / clientHeight 是当前浏览器可视窗口的宽度和高度(一屏幕的宽度和高度)
-> scrollWidth / scrollHeight 是当前页面的真实宽度和高度(所有屏加起来的宽度和高度,但是是一个约等于的值)
-> 我们不管哪些属性,也不管是什么浏览器,也不管是获取还是设置,想要兼容的话,就需要写两套
document.documentElement[attr] || document.body[attr] -> 必须document.documentElement在前面
-> 例如:
[获取]
document.documentElement.clientWidth || document.body.clientWidth
[设置也需要写两套]
document.documentElement.clientWidth = 0;
document.body.clientWidth = 0;
为了方便,编写一个关于操作浏览器盒子模型的方法win
如果只传递了attr没有传递value,默认的意思就是“获取”
如果两个参数都传递了,意思就是“设置”
不严谨的说,这就是有关于“类的重载”,同一个方法,通过传递参数的不同实现了不同的功能
<script type="text/javascript">
var box = document.getElementById("box");
console.dir(box);
function win(attr,value) {
if(typeof value === "undefined"){//->没有传递value值=“获取”
return document.documentElement[attr] || document.body[attr];
}
//“设置”
document.documentElement[attr] = value;
document.body[attr] = value;
}
</script>