原生js获取浏览器窗口及元素宽高常用方法集合

在前端开发中，经常需要获取浏览器窗口和元素的宽度和高度。这些信息对于响应式设计、布局和交互都非常重要。在本文中，我们将介绍一些原生JavaScript获取浏览器窗口和元素宽高的方法，包括其用法、优缺点以及示例代码。

获取浏览器窗口宽高

window.innerWidth 和 window.innerHeight

window.innerWidth 和 window.innerHeight 是两个最常用的获取浏览器窗口宽高的方法。它们返回的是视口（viewport）的大小，即不包括工具栏和滚动条的大小。

const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;

使用 window.innerWidth 和 window.innerHeight 的优点是简单易用，但是它们并不总是能够准确地反映出浏览器窗口的实际宽高，因为某些浏览器可能会把工具栏和滚动条算作视口的一部分。

document.documentElement.clientWidth 和 document.documentElement.clientHeight

document.documentElement.clientWidth 和 document.documentElement.clientHeight 是另外两个获取浏览器窗口宽高的方法。它们返回的也是视口的大小，但是相比 window.innerWidth 和 window.innerHeight，它们更加准确地反映了浏览器窗口的实际宽高。

const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;

使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 的优点是可以准确地获取浏览器窗口的实际宽高，但是缺点是需要考虑兼容性问题。在较旧的浏览器中可能不支持这两个属性。

window.outerWidth 和 window.outerHeight

window.outerWidth 和 window.outerHeight 是另外两个获取浏览器窗口宽高的方法。它们返回的是整个浏览器窗口的大小，包括工具栏和滚动条的大小。

const windowWidth = window.outerWidth;
const windowHeight = window.outerHeight;

使用 window.outerWidth 和 window.outerHeight 的优点是可以获取到整个浏览器窗口的大小，但是缺点是不够准确，因为某些浏览器可能会在视口之外添加其他元素，例如边框、菜单栏等等。

获取元素宽高

element.offsetWidth 和 element.offsetHeight

element.offsetWidth 和 element.offsetHeight 是两个最常用的获取元素宽高的方法。它们返回的是元素（包括其内边距和边框）的大小，单位为像素。

const elementWidth = element.offsetWidth;
const elementHeight = element.offsetHeight;

使用 element.offsetWidth 和 element.offsetHeight 的优点是简单易用，但是缺点是不包括元素的外边距和滚动条，而且如果元素被隐藏或者没有被添加到文档中，它们将返回0。

element.clientWidth 和 element.clientHeight

element.clientWidth 和 element.clientHeight 是另外两个获取元素宽高的方法。它们返回的是元素的内容区域（不包括内边距、边框和外边距）的大小，单位为像素。

const elementWidth = element.clientWidth;
const elementHeight = element.clientHeight;

使用 element.clientWidth 和 element.clientHeight 的优点是可以精确地获取元素的内容区域大小，而且不会受到元素的外边距、边框和滚动条的影

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1014