区分浏览器视口的尺寸（字节2020校招）_浏览器视口尺寸-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46179838/article/details/108882097

本文详细解析了浏览器视口的尺寸概念，包括clientWidth, clientHeight, clientTop, clientLeft, offsetWidth, offsetHeight, offsetTop, offsetLeft, scrollWidth, scrollHeight, scrollTop和scrollLeft等属性。通过这些属性，可以了解元素相对于浏览器窗口和内容区域的大小及位置，以及隐藏内容的尺寸。" 83309078,8166276,汽车电子中的ESD保护：静电二极管的作用与应用,"['汽车电子', 'ESD保护', '电路保护', '汽车安全', '半导体器件']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

区分视口的尺寸

可以先细看下面这张图片的一些元素的位置，浏览器相对于整个电脑桌面的宽高的区分

在这里插入图片描述

一、clientWidth和clientHeigh 、 clientTop和clientLeft

相对于整个浏览器的页面（除去最上面导航栏的位置）的clientWidth和clientHeigh 、 clientTop和clientLeft的位置的区分,求宽高加上padding，求上下的距离加上border的上下距离

在这里插入图片描述
1、clientWidth的实际宽度
clientWidth = width+左右padding

2、clientHeigh的实际高度
clientHeigh = height + 上下padding

3、clientTop的实际宽度
clientTop = boder.top(上边框的宽度)

4、clientLeft的实际宽度
clientLeft = boder.left(左边框的宽度)

二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

在这里插入图片描述

1、offsetWidth的实际宽度
offsetWidth = width + 左右padding + 左右boder

2、offsetHeith的实际高度
offsetHeith = height + 上下padding + 上下boder

3、offsetTop实际宽度
offsetTop：当前元素上边框外边缘到最近的已定位父级（offsetParent）上边框内边缘的距离。如果父级都没有定位，则分别是到body 顶部和左边的距离

4、offsetLeft实际宽度
offsetLeft：当前元素左边框外边缘到最近的已定位父级（offsetParent）左边框内边缘的距离。如果父级都没有定位，则分别是到body 顶部和左边的距离

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

1、scrollWidth实际宽度
scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）

2、scrollHeight的实际高度
scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）

3、scrollTop
scrollTop :内容层顶部到可视区域顶部的距离。

实例：var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

持续获取高度的方式：
window.addEventListener(‘scroll’, ()=>{
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
});

4、scrollLeft
scrollLeft:内容层左端到可视区域左端的距离.
在这里插入图片描述