js 获取浏览器宽度|极客笔记

js 获取浏览器宽度

在前端开发中，我们经常需要获取浏览器的宽度来进行响应式布局或者其他一些操作。本文将介绍如何使用JavaScript来获取浏览器的宽度。

window对象

在JavaScript中，我们可以通过window对象来操作浏览器窗口。window对象代表浏览器中打开的窗口，我们可以通过这个对象来获取浏览器的宽度。

let browserWidth = window.innerWidth;
console.log("浏览器宽度为：" + browserWidth);

以上代码中，我们使用window.innerWidth属性来获取浏览器的宽度，并将其打印出来。当我们在浏览器中执行这段代码时，控制台会输出当前浏览器的宽度。

resize事件

有时候我们需要在浏览器窗口大小改变时重新获取浏览器的宽度。这时可以使用resize事件来监听浏览器窗口大小的变化。

window.addEventListener("resize", function() {
    let browserWidth = window.innerWidth;
    console.log("浏览器宽度为：" + browserWidth);
});

以上代码中，我们使用addEventListener方法来监听resize事件，当浏览器窗口大小改变时，会执行回调函数中重新获取浏览器宽度的操作。

示例代码

下面我们来展示一个完整的示例代码，包括初始化获取浏览器宽度和监听resize事件重新获取浏览器宽度。

// 初始化获取浏览器宽度
let browserWidth = window.innerWidth;
console.log("浏览器宽度为：" + browserWidth);

// 监听resize事件重新获取浏览器宽度
window.addEventListener("resize", function() {
    let browserWidth = window.innerWidth;
    console.log("浏览器宽度为：" + browserWidth);
});