js盒子模型常用属性

Posted 2020-08-14

概念：通过js的属性和方法获得元素的样式信息值  查看元素详细属性console.dir();

操作元素盒子模型
1.client系列（当前元素的私有属性）
1）clientWidth/clientHeigth:内容的宽度(不包括内容溢出部分，固定设置的width和height)/高度+左右/上下padding值
2）clientTop/clientLeft:上/左边框的高度

2.offset系列
1）offsetHeight/offsetWidth:内容的高度/宽度+左右/上下padding+上下边框
2）offsetParent：当前元素的父级参照物
3）offsetLeft/offsetTop:当前元素的外边框距离父级参照物的偏移值

3.scroll系列
1）scrollWidth/scrollHeight:内容的宽度/高度(包括内容溢出部分)+左右/上下padding值
2）scrollLleft/scrollTop:滚动条卷去的宽度和高度

 

js盒子模型取值
1.我们通过这13个属性获取的值永远不会出现小数。浏览器会在原来的结果上四舍五入。

 

操作浏览器本身的盒子模型信息
clientWidth/clientHeigth:浏览器可视窗口宽和高（一屏宽高）;
document.documentElement.clientWidth;
scrollWidth/scrollHeight:当前页面的真实高度和宽度，获得的值是约等于的值不准确。
获取值和设置值解决兼容都必须写两套必须document.documentElement在前例如：
获取：document.documentElement.clientWidth || document.body.clientWidth
设置：document.documentElement.scroll = 0;
document.body.scroll = 0;

关于操作浏览器盒子模型的方法
如果传递了attr没有传递value代表获取值，如果两个参数都传递了代表设置值。
不严谨的来说这就是有关于“类的重载”：同一个方法，通过传递参数的不同实现了不同的功能
function win(attr,value){
if(typeof value === "undefined"){//没有传值就获取值
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr] = value;
document.body[attr] = value;
}
console.log(win("clientWidth"));
console.log(win("clientWidth",50));