开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

必了解

获取元素的尺寸

这两种获取方法跟我们之前使用的getComputedStyle(万能获取属性法)有什么区别呢？

原始的这种获取尺寸的方式只能获取到我们元素的内容区大小却忽略了边框和内边距的大小

我们先来比较这两种的不同之处：

offsetWidth是（border+padding+width）组成，高度同理。简而言之，他就是内容区的大小+边框的大小+内边距的大小

 // 当盒子设置为怪异盒模型
 offsetWidth等于width 
 offsetHeight等于height

clientWidth是（padding+width）组成，高度同理。他是内容区的大小＋内边距的大小

// 当盒子设置为怪异盒模型时
clientWidth等于width-（减去）border 
clientHeight等于height-（减去）border

两者相同的:

 当盒子被设置为display:none时获取不到值
 单位同为数字

offsetTop(offsetLeft)使用方法：

    参考点：有定位的父级元素
    (如果父元素都没有定位，那么这个值就相对于body了)

clientTop(clientLeft)使用方法：

    参考点:自身的左上角(包括了边框)
    clientLeft(clientTop)就相当于自身的边框大小
    (内容区到整个元素最外围的距离)

让我们先复习一下在BOM中获取可视窗口的大小

window.innerWidth  //获取可视窗口的宽度
window.innerHeight  //获取可视窗口的高度
这里的window不用加也是可以用的，但是这个获取方式会把滚动条
的大小也算进来。

那有没有把滚动条去除在外的获取方式呢？来看看下面的这种方式

document.documentElement.clientWidth //获取可视窗口的宽度
document.documentElement.clientHeight //获取可视窗口的高度
用这个方法获取的尺寸不包括滚动条，可以让我们更精准的计算