设置监听动态获取window.innerWidth和window.innerHeight
时间: 2024-09-09 20:06:56 浏览: 51
jQuery获得document和window对象宽度和高度的方法
在Web开发中,`window.innerWidth`和`window.innerHeight`属性可以获取浏览器窗口的内部宽度和高度,不包括滚动条等边框。如果想要动态监听窗口尺寸的变化,可以使用`window.onresize`事件。
以下是如何实现动态获取窗口内部宽度和高度,并在窗口尺寸变化时更新这些值的示例代码:
```javascript
// 获取当前窗口的内部宽度和高度
function updateWindowSize() {
const width = window.innerWidth;
const height = window.innerHeight;
console.log("当前窗口宽度为:" + width + ",高度为:" + height);
// 这里可以添加代码将获取到的宽度和高度显示在页面上或者做其他操作
}
// 初始获取一次窗口大小
updateWindowSize();
// 监听窗口尺寸变化事件
window.onresize = function() {
updateWindowSize();
};
```
在这个示例中,`updateWindowSize`函数负责获取窗口的宽度和高度,并在控制台输出。首先调用一次该函数来获取初始尺寸,然后通过为`window.onresize`事件分配一个新函数来监听窗口尺寸的变化。
当窗口大小发生变化时,`onresize`事件会被触发,随后执行`updateWindowSize`函数以获取并处理新的尺寸数据。
阅读全文