📌  相关文章
📜  如何使用 JavaScript 计算窗口的宽度和高度？(1)

📅  最后修改于: 2023-12-03 14:51:56.061000             🧑  作者: Mango

如何使用 JavaScript 计算窗口的宽度和高度？

在JavaScript中，我们可以使用window对象的属性和方法来计算浏览器窗口的宽度和高度。以下是一些常见的方法。

1. 使用window.innerWidth和window.innerHeight

window.innerWidth属性可以获取浏览器窗口的宽度（不包括滚动条和边框），window.innerHeight属性可以获取浏览器窗口的高度（不包括滚动条和边框）。

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

console.log(`Window Width: ${windowWidth}`);
console.log(`Window Height: ${windowHeight}`);

上述代码将打印出浏览器窗口的宽度和高度。

2. 使用document.documentElement.clientWidth和document.documentElement.clientHeight

另一种方法是使用document.documentElement.clientWidth属性获取文档元素（即<html>元素）的宽度，document.documentElement.clientHeight属性获取文档元素的高度。这两个属性的值与window.innerWidth和window.innerHeight相同。

const windowWidth = document.documentElement.clientWidth;
const windowHeight = document.documentElement.clientHeight;

console.log(`Window Width: ${windowWidth}`);
console.log(`Window Height: ${windowHeight}`);
3. 使用document.documentElement.offsetWidth和document.documentElement.offsetHeight

document.documentElement.offsetWidth属性可以获取文档元素的宽度（包括滚动条和边框），document.documentElement.offsetHeight属性可以获取文档元素的高度（包括滚动条和边框）。

const windowWidth = document.documentElement.offsetWidth;
const windowHeight = document.documentElement.offsetHeight;

console.log(`Window Width: ${windowWidth}`);
console.log(`Window Height: ${windowHeight}`);
4. 监听窗口大小变化

如果你需要在窗口大小变化时获取最新的窗口宽度和高度，可以使用resize事件来监听窗口大小的变化。

window.addEventListener('resize', function() {
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  console.log(`Window Width: ${windowWidth}`);
  console.log(`Window Height: ${windowHeight}`);
});

上述代码将在窗口大小变化时实时打印出窗口的宽度和高度。

以上就是使用 JavaScript 计算窗口宽度和高度的几种常见方法。根据你的需求选择适合的方法即可。