迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

在 JavaScript 中获取视口尺寸

作者:迹忆客 最近更新:2024/03/22 浏览次数:

浏览器视口是可以查看网页内容的窗口区域。本文将学习如何在 JavaScript 中获取 Viewport Dimension。

Javascript 提供了两种方法来找出设备的视口。

  • 使用 window.innerWidthwindow.innerHeight
  • 使用 document.documentElement.clientWidth.clientHeight

在 JavaScript 中使用 window.innerWidth 获取视口宽度

窗口的只读 innerWidth 属性返回窗口的内部宽度(以像素为单位)。这包括垂直滚动条的宽度

窗口的内部高度可以从 innerHeight 属性获得。

语法:

let intViewportWidth = window.innerWidth;

一个整数值表示窗口布局 viewport 的宽度(以像素为单位)。此属性没有默认值并且是只读的。

要更改窗口的宽度,请使用窗口的方法之一来更改窗口的大小,例如 resizeBy()resizeTo()

有关 window.innerWidth 的更多信息。

function resizeEventListener() {
  console.log('innerHeight', window.innerHeight);
  console.log('innerWidth', window.innerWidth);
}

window.addEventListener('resize', resizeEventListener);

我们在调整浏览器窗口大小之前和之后计算窗口的内部高度和宽度。

要获得减去滚动条和边框的窗口宽度,请改用 clientWidth 属性。结果可能因窗口而异。

输出:

// Before resize
"innerHeight", 219
"innerWidth", 1326
// After resize
"innerHeight", 166
"innerWidth", 974

在 JavaScript 中使用 document.documentElement.clientWidth 获取视口宽度

对于内联项目和没有 CSS 的元素,属性 element.Clientwidth 为零;否则,它是以像素为单位的元素的内部宽度。

包括内边距,但不包括边框、边距和垂直滚动条。

当在根元素上使用 clientWidth 或文档处于 quirks mode 时,将返回视口的宽度,不包括滚动条。

语法:

var intElemClientWidth = element.clientWidth;

intElemClientWidth 是一个整数值,表示元素的 clientWidth(以像素为单位)。clientWidth 属性是只读的。

更多信息请见 element.clientWidth。

function resizeEventListener() {
  console.log('clientWidth', document.documentElement.clientWidth);
  console.log('clientHeight', document.documentElement.clientHeight);
}
window.addEventListener('resize', resizeEventListener);

我们计算客户的内部高度和宽度。

输出:

// Before resize
"clientWidth", 1326
"clientHeight", 219
// After resize
"clientWidth", 974
"clientHeight", 166

要查看结果,请单击此处。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 JavaScript 中闪烁文本

发布时间:2024/03/22 浏览次数:119 分类:JavaScript

本文将介绍如何通过窗口对象加载函数、onload 属性和使用 JavaScript 的 jQuery 约定来执行文本闪烁。

在 JavaScript 中高亮显示文本

发布时间:2024/03/22 浏览次数:103 分类:JavaScript

本教程向我们展示了如何使用 JavaScript 高亮显示文本。将用于此目的的方法是 searchPrompt 方法和标记标记方法,将使用代码段详细说明。

在 JavaScript 中创建哔声

发布时间:2024/03/22 浏览次数:119 分类:JavaScript

JavaScript 不具有任何直接的方法或属性来警告哔声或在特定函数上产生任何声音。但是该任务可以通过添加音频源并使用 JavaScript 音频功能使用 HTML 标记来完成。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便