笔记大全

vue3如何获取屏幕可视区域宽高

更新时间：2023-12-07

# 第一段在 Vue3 中获取屏幕可视区域宽和高的方法有很多，其中较为常见的方式是通过 `window.innerWidth` 和 `window.innerHeight` 属性来获取可视区域的宽和高。这两个属性分别返回以像素为单位的浏览器窗口的视口宽度和高度。无论窗口是否包括工具栏和滚动条，这两个值都将反映当前窗口的视口大小。下面是一个示例代码： ```html

方法一：

通过 window.innerWidth 和 window.innerHeight 两个属性获取可视区域的宽和高：

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

  console.log(`屏幕可视区域宽度为：${viewportWidth}px`);
  console.log(`屏幕可视区域高度为：${viewportHeight}px`);

# 第二段除了直接使用 `window.innerWidth` 和 `window.innerHeight` 属性获取宽和高外，我们还可以通过`document.documentElement.clientWidth`和`document.documentElement.clientHeight`两个属性来获取可视区域的宽和高。它们与 `window.innerWidth` 和 `window.innerHeight` 的功能类似，但是其返回的是文档对象的 `clientWidth` 和 `clientHeight` 属性，即不包括滚动条的宽度和高度的测量值。下面是一个示例代码： ```html

方法二：

通过 document.documentElement.clientWidth 和 document.documentElement.clientHeight 两个属性获取可视区域的宽和高：

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

  console.log(`屏幕可视区域宽度为：${viewportWidth}px`);
  console.log(`屏幕可视区域高度为：${viewportHeight}px`);

# 第三段有时候，我们需要得到整个文档内容的高度和宽度，这时候可以使用 `document.body.scrollWidth` 和 `document.body.scrollHeight` 属性来获取文档内容的高度和宽度。这两个属性返回的值包括文档的滚动部分。下面是一个示例代码： ```html

方法三：

通过 document.body.scrollWidth 和 document.body.scrollHeight 两个属性获取文档内容的宽和高：

  const documentWidth = document.body.scrollWidth;
  const documentHeight = document.body.scrollHeight;

  console.log(`文档宽度为：${documentWidth}px`);
  console.log(`文档高度为：${documentHeight}px`);

# 第四段最后，我们还可以使用 `document.documentElement.scrollWidth` 和 `document.documentElement.scrollHeight` 属性来获取文档内容的高度和宽度。它们与 `document.body` 类似，但是返回的是整个文档的内容大小，包括视口之外的部分。下面是一个示例代码： ```html

方法四：

通过 document.documentElement.scrollWidth 和 document.documentElement.scrollHeight 两个属性获取文档内容的宽和高：

  const documentWidth = document.documentElement.scrollWidth;
  const documentHeight = document.documentElement.scrollHeight;

  console.log(`文档宽度为：${documentWidth}px`);
  console.log(`文档高度为：${documentHeight}px`);

c语言编程笔录