监听浏览器窗口改变导致高度变化

最新推荐文章于 2023-09-07 09:11:02 发布
最新推荐文章于 2023-09-07 09:11:02 发布
阅读量507 收藏
点赞数
分类专栏： js 笔记 文章标签： JavaScript DOM操作 窗口事件 元素尺寸 响应式布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43341001/article/details/115764177
版权
笔记 同时被 2 个专栏收录
38 篇文章 0 订阅
订阅专栏
js
25 篇文章 0 订阅
订阅专栏 
  /**
        *监听页面高度变化
        */
       window.addEventListener("resize",function(){
           if(document.getElementById("asideLeft")){
               let asideLeft = document.getElementById("asideLeft");
               asideLeft.style.heigth = window.innerHeight-50+"px";
           }
       },false)
爱吃鱼的康康
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 监听屏幕高度的实例
12-12
项目用vue版本是2.0的，项目中用到es6 首先需要在data里面定义页面的高度 data (){ return { fullHeight: document.documentElement.clientHeight } } 把[removed]事件挂在到mounted mounted() { const that = this [removed] = () => { return (() => { window.fullHeight = document.documentElement.clientHeight
监听页面高度变化_vue监听页面大小变化重新刷新布局
weixin_32254267的博客
12-23 1781
#=============================更新 2020-07-27 start==================监听页面大小变化，可以在main.js文件中使用window.addEventListener方法进行监听处理。例如：监听页面大小变化，进行字体处理function onResize() {let htmlBaseFontSize = 50;let designBo...
vue监听浏览器窗口变化动态设置高度
果栋的博客
09-07 684
/ 获取页面滚动高度。//绑定页面滚动事件。// 重新赋值最新窗口数据。
监听页面高度变化_js监听屏幕的高度变化
weixin_34039843的博客
12-23 4539
之前用VUE写完一个聊天界面，对于ios的效果该优化的地方都已经优化，且已上线。现在因项目需要，在另外一个angularjs+ionic的框架也要写一个聊天页面，目前还在开发中，发现忘记了一些很关键的东西，所以先备个份：1.当屏幕发生高度变化(其实是当软键盘打开的时候，窗口的高度发生了变化)window.onresize = () =>{//只要窗口高度发生变化，就会进入这里面，在这里就可以...
前端：监听浏览器窗口发生变化，并获取dom元素的高度
weixin_50236973的博客
11-17 627
【代码】前端：监听浏览器窗口发生变化，并获取dom元素的高度。
监听页面宽高变化
weixin_46389242的博客
11-28 565
【代码】监听页面宽高变化。
监听页面高度变化_vue项目如何监听窗口变化，达到页面自适应？
weixin_42501949的博客
02-12 2932
【自适应】向来是前端工程师需要解决的一大问题——即便作为当今非常火热的vue框架，也无法摆脱——虽然elementui、iview等开源UI组件库层出不穷，但官方库毕竟不可能满足全部需求，因此我们可以通过【监听窗口变化】达到想要的绝大部分自适应效果。获取窗口宽度：document.body.clientWidth监听窗口变化：window.onresize同时回顾一下JS里这些方法：网页可见区域宽...
利用 onresize 事件，实现页面大小随浏览器窗口变化
Sun_blog
12-14 3589
利用 onresize 事件，实现页面大小随浏览器窗口变化
jquery实现根据浏览器窗口大小自动缩放图片的方法
10-23
通过这个方法，图片能够在浏览器窗口大小改变时自动调整尺寸，保持相对比例，从而提供良好的响应式布局效果。这种方法特别适用于响应式网站设计，可以确保图片在不同设备和屏幕尺寸上都能正常显示。同时，由于使用了...
使用jQuery监听DOM元素大小变化
01-19
起因 今天写页面的时候突然有...平常，都是在整个浏览器窗口变化时触发一个修改布局的回调函数。使用的是window对象的resize事件，利用： [removed] = callback; 来绑定。但根据resize事件的target是defaultView (w
JavaScript — resize事件监听窗口变化
ajdhakj6的博客
12-28 4411
JavaScript — resize事件监听窗口变化
vue监听窗口变化
xuemeizeng的博客
01-15 800
vue监听窗口变化坑 window.onresize = function temp() { this.HWindow = (window.innerHeight - 60) + “px” } 这代码看似没什么问题，可是文本高度就是不等于窗口高度 填坑 let that = this window.addEventListener(“resize”, function() { return (()...
监听屏幕高度(解决刷新页面无法再次自适应的问题)
weixin_55971241的博客
10-24 445
监听屏幕高度问题
浏览器页面监听高度变化，改变视图高度window.onresize()
yehaocheng520的博客
03-11 1419
浏览器页面监听高度变化window.onresize浏览器页面监听高度变化 浏览器页面监听高度变化 作为一个程序员，在进行代码调试时，经常需要用到浏览器的控制台，这样就导致浏览器可见视图高度发生变化，当高度发生变化时，页面渲染的区域也会发生变化。 具体实现代码如下： <script> window.onresize = ()=>{ vm.screenHeight = `${document.documentElement.clientHeight}` - 180; } var vm
JS 获取当前屏幕高度方法和监听dom元素进入视口
weixin_50367873的博客
02-15 4129
js 网页可见区域宽： document.documentElement.clientWidth || document.body.clientWidth 网页可见区域高： document.documentElement.clientHeight || document.body.clientHeight 网页可见区域宽： document.documentElement.offsetWidth || document.body.offsetWidth (包括边线的宽) 网页可见区域高： document
JavaScript--监听浏览器窗口高度变化，并设置超出部分显示滚动条(完整代码)
weixin_45406850的博客
02-16 4431
【代码】JavaScript--监听浏览器窗口高度变化，并设置超出部分显示滚动条(完整代码)
window.onresize与window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听
热门推荐
weixin_44490109的博客
02-23 2万+
目录一、背景二、`window.onresize`为什么在重复使用过程中会被覆盖？三、`window.addEventListener`的运用 一、背景 在做浏览器窗口监听时我们该选用window.onresize还是window.addEventListener('resize',...)呢？之前遇到过这样一种情况，在一个vue项目的navBar部份使用了window.onresize做了监听控制，当窗口缩放到一定大小以下时菜单只显示图标隐藏文字，后面由于在做表格时也需要去做监听以实现自适应策略，在实现的
js addEventListener监听scroll滚动条 距离底部一定距离，加载数据，超过最大高度移除监听事件
qq_43341001的博客
04-18 2434
//测试dmeon .testBox{ height: 450px; border: 1px solid rebeccapurple; width: 500px; color: blueviolet; overflow-y: auto; } 在这里插入代码片 ```<div class="testBox"> <div class="sunBox"> <div class="childBox">今天天气不错
Vue - 实时监听浏览器窗口宽高变化
王佳斌
06-01 6188
前言 有时页面需要根据浏览器宽高进行样式或逻辑的变化，这时候就需要 实时 获取浏览器窗口宽高。 解决方案 在生命周期钩子函数 mounted() 中通过 document.body.clientWidth | document.body.clientHeight 获取浏览器宽高，然后通过 window.onresize 监听浏览器窗口变化，当变化时修改 data() 变量来实现。 <template> <div> <h2>当前宽度: {{ screenWidth
vue监听浏览器窗口变化
最新发布
07-24
Vue.js 是一种流行的前端框架，它提供了一种高效的方式来创建动态网页应用。Vue 支持在组件中监听各种事件和属性的变化，这其中就包括监听浏览器窗口的状态改变，比如大小变化、位置变化、方向变化等。这通常是通过 `watch` 对象来完成的。 下面是一个简单的例子说明如何使用 Vue 来监听并响应浏览器窗口的变化： 首先，在 Vue 实例或组件的 `data` 属性中定义一些依赖于窗口状态的数据变量。例如，我们想实时更新一个数据变量，反映当前浏览器窗口的宽度： ```html <template> <div id="app"> 现在的窗口宽度是：{{ currentWindowWidth }} </div> </template> <script> export default { name: 'App', data() { return { currentWindowWidth: null, }; }, mounted() { // 初始化加载时设置窗口宽度 this.$nextTick(() => { this.updateWindowSize(); }); // 监听窗口变化 window.addEventListener('resize', this.updateWindowSize); }, beforeDestroy() { // 在组件销毁前移除事件监听 window.removeEventListener('resize', this.updateWindowSize); }, methods: { updateWindowSize() { this.currentWindowWidth = window.innerWidth; } } }; </script> <style scoped> #app { font-family: Avenir, Helvetica, Arial, sans-serif; } </style> ``` 在这个例子中： 1. **初始化加载**：在组件挂载到 DOM 上之后立即读取窗口的初始宽度并赋值给 `currentWindowWidth`。 2. **添加事件监听**：使用 `window.addEventListener('resize', this.updateWindowSize);` 添加了一个事件监听器，当浏览器窗口大小发生变化时，会触发 `updateWindowSize` 方法。 3. **处理事件**：在 `updateWindowSize` 方法内部，我们简单地将 `window.innerWidth` 赋值给了 `this.currentWindowWidth`，使得 `currentWindowWidth` 随着窗口大小的变化而动态更新。 4. **清理监听**：在组件销毁之前，我们需要清除掉先前添加的事件监听器，以免导致内存泄漏。 这样，当你调整浏览器窗口大小时，页面上显示的 “现在的窗口宽度” 就会即时更新，反映出新的窗口宽度值。这对于实现响应式设计或是基于窗口大小条件的不同交互逻辑非常有用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值