window.onresize（当你改变窗口大小的时候会触发这个事件）

最新推荐文章于 2024-07-14 10:36:57 发布
转载 最新推荐文章于 2024-07-14 10:36:57 发布 · 5.5k 阅读 · 0

本文介绍了一种使用JavaScript实现的网页背景自适应方法，通过监听窗口尺寸变化来调整背景图片的大小，确保背景图片能够在不同分辨率下完美显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

window.onresize（当你改变窗口大小的时候会触发这个事件）


写法：


<script>
var body=(document.getElementsByTagName("body"))[0];
function beijing(){
var bjHeight=window.innerHeight,
bjWidth=bjHeight*(1920/1080),
windowWidth=window.innerWidth;
if(  bjWidth<=windowWidth  ){
body.style.backgroundSize=windowWidth+"px "+bjHeight+"px";
}else if(  bjWidth>windowWidth  ){
body.style.backgroundSize=bjWidth+"px "+bjHeight+"px";
}
}
beijing();
window.onresize=function(){
beijing();
}
</script>

利用 onresize 事件，实现页面（元素）大小随浏览器窗口变化
Sun_blog
06-12 217
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情 前言 在日常开发中，可能会遇见页面(元素)大小随浏览器窗口变化的需求。本文就记录了如何利用 onresize 事件，实现这样效果。 思路 利用onresize 事件会在窗口大小发生变化时触发的特点，结合使用函数将浏览器窗口的宽高赋值给目标元素，即可实现页面(或页面元素)大小随浏览器窗口变化。 ...
window.onresize事件在vue项目中的应用
qq_35859392的博客
04-23 2153
window.onresize事件在vue项目中的应用 //vue页面<template> <div id='echart'> 报表 </div> </template> <script> export default { data() {...
关于在窗口或框架被调整大小时发生的onresize 事件的使用总结
weimeixiehou的博客
05-26 1488
关于在窗口或框架被调整大小时发生的onresize 事件的使用总结
window.onresize——调整窗口大小事件
热门推荐
在热爱技术的路上一直前行。
05-08 1万+
1、语法规范 window.onresize = function(){} window.addEventListener('resize',function() {}); 2、作用 是调整窗口大小加载事件，当触发时就调用的处理函数。 3、注意 只要窗口大小发生像素变化，就会触发这个事件。 我们经常利用这个事件完成响应式布局。window.innerWidth为当前屏幕的宽度。 ...
uni.onWindowResize 监听窗口尺寸变化事件详讲
Brod-Roy的博客
12-12 5873
官方介绍是监听窗口尺寸变化事件（1.6.0 新增），听起来只能监听一下页面的宽高，实际上在 uniapp 中可以用事件监听到页面的屏幕宽高和当前设备的横竖屏状态。
窗口事件onresize
weixin_30906701的博客
09-18 447
在做自适应布局的时候，我们常常需要根据窗口不同的分辨率给出不同布局和样式，今天说的onresize便能帮我们实现这一效果。 onresize事件在窗口或者框架的大小发生改变的时候会被调用，下面我们用一个例子来演示。 在这个例子中，我们想要实现的效果是：当屏幕宽度小于500时，页面的背景色为灰色；当屏幕宽度大于等于500时，页面背景为粉色；当屏幕宽度大于等于800时，页面背景为红色。所以，我们首...
js实现浏览器窗口大小被改变时触发事件的方法
10-24
onresize是window对象的一个事件处理器，当浏览器窗口的大小发生改变时，这个事件处理器关联的函数就会被调用。开发者可以将自定义的JavaScript代码绑定到这个事件上，从而在窗口大小变化时执行相应的操作。这是响应...
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
10-18
当浏览器窗口大小改变时，我们需要监听`window.onresize`事件，并在事件触发时更新`myWidth`的值。在Vue组件的`mounted`生命周期钩子中，我们可以设置`window.onresize`事件处理函数： ```javascript mounted() ...
window.onresize和resize
04-29
`resize` 事件是 `Window` 对象的一个事件，它表示窗口大小改变时触发的事件。可以使用 `window.addEventListener` 方法来添加或删除 `resize` 事件的处理函数，例如： ```javascript window.addEventListener('...
如何利用window.onresize来监听元素大小的变化
最新发布
09-14
`window.onresize` 是 JavaScript 中的一个全局事件处理器，用于监听窗口大小调整时触发的事件。如果你想监听某个特定元素的大小变化，而不是整个窗口，你不能直接使用 `onresize`，因为它的目标是整个视口。但是，...
window.onresize=function()
12-30
这意味着当窗口大小改变时，会先执行第一个函数，然后再执行第二个函数。 ```javascript $(function() { window.onresize = function() { alert("abc"); }; window.onresize = function() { alert("error"); ...
当浏览器窗口大小改变时事件
weixin_34138377的博客
08-26 272
&lt;script type="text/javascript"&gt;               window.onload=function(){                    changeDivHeight();               }   　　　　//当浏览器窗口大小改变时，设置显示内容的高度               window.onresize=fun...
vue项目经验：window.onresize的使用
weixin_45031595的博客
05-25 3448
重点：window.onresize只能在一个组件中使用，如果多个组件调用则会出现覆盖情况，所以我的解决方案是在App.vue中使用，获取document.documentElement.clientWidth（即浏览器宽度）存放在vuex中，别的组件只需要用computed(计算属性)将vuex的clientWidth获取，然后通过watch监听clientWidth的值，即可触发组件事件 App.vue代码 <script> export default { name: 'app',
Vue进阶（贰零零）：window.onresize事件在vue项目中的应用
IT全栈 华强工作室
08-26 4363
属性 window.onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数。 在窗口大小改变之后,就会触发resize事件. //vue页面 <template> <div id='echart'> 报表 </div> </template> <script> export default { data() { return { }; }, method
vue项目中使用window的onresize事件
roongyan92的博客
12-11 6288
vue项目中使用vue-echars绘制图表时，需要实时根据窗口大小调整图表的大小，我使用的auto-resize属性，没有作用，没有找出错误在哪里，使用window.onresize事件，必须销毁才不会报错哦，代码如下： <template> <chart ref="chart1" :options="orgOptions"></chart> &l...
vue中使用window.onresize无效
Zhang's Blog
12-03 5892
在父、子组件中同时使用了window.onresize，子组件中window.onresize无效。 子组件代码如下：出现问题为console的lineHeigt为2，但实际在vue中lineHeigt仍为0 data(){ return { lineHeigt: 0 } }, mounted() { let _this = this; window.onresize = function() { _this.getLineHeight(); } }， methods: { getLin
vue不同组件使用window.onresize只监听到一个的问题
Mr-yang的随笔
12-09 962
原本写法： window.onresize = () => { // 窗口尺寸改变时触发事件 } 改进写法 window.addEventListener('resize', () => { // 窗口尺寸改变时触发事件 })
使用Windows.size（）定义窗口大小
lstef的博客
07-14 587
在build()函数中，可以使用Windows.size()函数定义应用窗口大小。
当浏览器窗口大小改变时，设置显示内容的高度
mentalitys的博客
03-08 2067
//当浏览器窗口大小改变时，触发window.onresize事件 window.onresize=function(){ changeDivHeight(); } function changeDivHeight(){ //宽度 var ChiWidth=$(document).width() < $('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值