JS盒子模型

最新推荐文章于 2023-09-18 19:09:03 发布

VisonYH

最新推荐文章于 2023-09-18 19:09:03 发布

阅读量444

点赞数

CC 4.0 BY-SA版权

分类专栏： JS修炼之路

本文链接：https://blog.youkuaiyun.com/yihui1314/article/details/79118725

JS修炼之路专栏收录该内容

35 篇文章

订阅专栏

概念：JS盒子模型是指通过JS提供的一系列属性和方法，获取页面元素的样式信息值。

以 div 元素为例，div 有很多私有属性和原型链上的公有方法，其原型链继承关系是：HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> Node.prototype -> EventTarget.prototype -> Object.prototype.
console.dir(DOM) 可以将该元素的所有属性方法打印出来，便于进行方法的快速查找。
这里写图片描述

针对JS中的三大盒子模型

1. client系列

clientWidth / clientHeight : 内容的宽高 + padding。
注：内容的宽高取决于有无设置 width 和 height，若设置，与内容是否溢出无关；未设置宽高时，以实际宽高为准。
clientLeft：左边框的宽度；
clientTop：上边框的宽度。

2. offset系列

offsetWidth / offsetHeight : clientWidth / clientHeight + 左右 / 上下边框；
offsetParent : 当前元素的父级参照物；
offsetLeft / offsetTop : 当前元素的外边框相对于父级参照物的内边框的偏移量；

3. scroll系列

scrollHeight / scrollWidth : 真实内容的宽高 + padding
注：获取到的值都是“约等于”的值，因为：同一个浏览器对于是否设置 overflow：hidden 对于最终结果有影响；不同浏览器对于结果也是不同的。
scrollTop / scrollLeft : 滚动条卷去的高度、宽度。

注：以上获取值均为整数，因浏览器会对真实结果进行四舍五入。

针对浏览器本身的盒子模型信息

document.documentElement.clientHeight(clientWidth) : 当前浏览器一屏的高度（宽度）
document.documentElement.scrollHeight(scrollWidth) : 当前浏览器真实的高度（宽度）
注：以上写法存在兼容性问题，不管是获取还是设置哪些属性、也不管是哪些浏览器，想要兼容的话，需要写两套。具体写法如下：

document.documentElement[attr]||document.body[attr]; // attr 为具体属性值