js盒子模型常用属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js盒子模型常用属性相关的知识,希望对你有一定的参考价值。

概念:通过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));

以上是关于js盒子模型常用属性的主要内容,如果未能解决你的问题,请参考以下文章

JS“盒子模型”

关于js盒子模型的知识梳理

JS-盒子模型

CSS小技能:常用样式属性选择器分类盒子模型

javascript基础学习系列-DOM盒子模型常用属性

js盒子模型