Allenice

Appearance

在浏览器中，用 JS 获取高度和宽度都各有 3 种，分别包括屏幕，浏览器和网页的。

屏幕宽高 ​

js
console.log("宽度：", window.screen.width);
console.log("高度：", window.screen.height);
console.log("宽度：", window.screen.width);
console.log("高度：", window.screen.height);

浏览器可用工作区的宽高 ​

浏览器宽高是指浏览器窗口最大化时的宽高，普通的最大化后，一般就是去掉系统任务栏高度，而宽度和屏幕宽是一样的。这个宽高在任务栏占用空间变化时会变化。

js
console.log("宽度：", window.screen.availWidth);
console.log("高度：", window.screen.availHeight);
console.log("宽度：", window.screen.availWidth);
console.log("高度：", window.screen.availHeight);

网页宽高 ​

网页宽高，是指页面所占的宽高，浏览器除了页面内容以外的部分，不计算在内。标签栏，地址栏，书签栏，控制台等全不计算在宽高的范围里面，只有网页内容区域才是。

js
console.log("宽度：", window.innerWidth);
console.log("高度：", window.innerHeight);
console.log("宽度：", window.innerWidth);
console.log("高度：", window.innerHeight);

元素的 client、offset、scoll 宽高 ​

js
document.body.clientWidth; //网页可见区域宽(body)

document.body.clientHeight; //网页可见区域高(body)

document.body.offsetWidth; //网页可见区域宽(body)，包括border、margin等

document.body.offsetHeight; //网页可见区域宽(body)，包括border、margin等

document.body.scrollWidth; //网页正文全文宽，包括有滚动条时的未见区域

document.body.scrollHeight; //网页正文全文高，包括有滚动条时的未见区域

document.body.scrollTop; //网页被卷去的Top(滚动条)

document.body.scrollLeft; //网页被卷去的Left(滚动条)

window.screenTop; //浏览器距离Top

window.screenLeft; //浏览器距离Left
document.body.clientWidth; //网页可见区域宽(body)

document.body.clientHeight; //网页可见区域高(body)

document.body.offsetWidth; //网页可见区域宽(body)，包括border、margin等

document.body.offsetHeight; //网页可见区域宽(body)，包括border、margin等

document.body.scrollWidth; //网页正文全文宽，包括有滚动条时的未见区域

document.body.scrollHeight; //网页正文全文高，包括有滚动条时的未见区域

document.body.scrollTop; //网页被卷去的Top(滚动条)

document.body.scrollLeft; //网页被卷去的Left(滚动条)

window.screenTop; //浏览器距离Top

window.screenLeft; //浏览器距离Left

区分 clientWidth、offsetWidth、scrollWidth ​

clientWidth/clientHeight ​

clientWidth和clientHeight计算时包含的是content和padding

不包括border、margin、滚动条，对于inline元素这个属性一直是 0

offsetWidth/offsetHeight ​

offsetWidth/offsetHeight计算时包含 content + padding + border

不包括margin的元素的高度。对于inline的元素这个属性一直是 0

offsetTop/offsetLeft/offsetRight/offsetBottom： ​

代表元素距离父级元素的相对距离，但是父级元素需要具有 relative 定位，直到找到 body，并且即使元素会被滚动，这个值也不会改变

scrollWidth/scrollHeight ​

scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸，这个只针对 dom 的子元素出现溢出情况时，才有效果，不然它始终和 clientHeight 相等

scrollTop ​

代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。

注意：这个属性表示的是容器，不是容器内元素

getBoundingClientRect() ​

它返回一个对象，其中包含了 left、right、top、bottom 四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离

注意:当元素溢出浏览器的视口，值会变成负数。

但是滚动元素是从可视区域的左上角和右下角开始计算，如果想获取滚动元素整体的坐标，需要加上滚动距离