onresize的定义方式

最新推荐文章于 2024-02-01 16:05:15 发布
最新推荐文章于 2024-02-01 16:05:15 发布
阅读量332 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zycbloger/p/5551418.html
本文介绍了三种处理浏览器窗口调整大小事件的方法：直接在HTML中定义、通过JavaScript为window和body设置onresize事件处理函数以及使用addEventListener监听window的resize事件。并讨论了不同方法之间的相互覆盖关系。

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


1.直接在html中定义
如<body onresize="doResize()"/>


2.直接给onresize赋值
给window和body的onresize赋值
如window.onresize=function(){},document.body.onresize=function(){}


3.使用事件监听
只对window有作用
如window.addEventListener("resize",fn);


说明：
1、直接给onresize赋值会覆盖在html中定义。
2、直接给onresize赋值，window,body只有一个起作用，后定义的会覆盖先定义的
3、事件监听只对window有效，可以其它方式同时触发。

转载于:https://www.cnblogs.com/zycbloger/p/5551418.html

JS基础-特效篇（三大家族）08-onresize
weixin_45799003的博客
05-11 218
概念：当窗口或者框架的大小发生改变时就会调用。 用于自适应页面布局等多屏幕适配场景。 1.案例：改变浏览器尺寸，可以改变浏览器背景颜色。 <script src="MyTool/MyTool.js"></script> <script> window.addEventListener('load',function (ev) { changeColor(); //1.监听窗口的尺寸发生改变 window.addEve
js进阶之onresize
weixin_45170547的博客
06-16 3441
常用窗口事件–onresize 当窗口或框架发函俄国改变的时候就会调用; onresize一般用于自适应页面布局等多屏幕适用场景; 获取屏幕的分辨率：**window.screen.width.screen.height. 典型事件：当屏幕的宽度>=960时，页面的背景颜色为红色；当屏幕的宽度>=640时，页面的背景颜色为蓝色；当屏幕的宽度<640时，页面的背景颜色为绿色？ &l...
JavaScript学习笔记（三）——onresize与事件传递机制
热门推荐
多思易掉发
09-01 3万+
常见窗口事件—onresize 当窗口或者框架的大小发生改变的时候就会调用 一般用于自适应页面布局等多屏幕适配场景 《插入》 margin边框顺序 ：上��下�� ## JS事件传递机制 ## 冒泡机制 气泡从水底往上升，穿过水层，由深到浅 事件从子传向父 水则相当于Dom树，事件从Dom树的底层向上传递，直到传递到dom节点 div-&amp;gt;body-&amp;gt;htm...
js 在方法中调用 resize 方法
weixin_42879346的博客
04-15 8939
简介 先介绍一下 遇到的问题，在项目中 引入了 v-charts 进行绘图，但是 由于使用的 基于 vue 的单页面应用，在将菜单 隐藏或打开的时候，不能触发 window.resize 方法，导致 绘制的图形 发生了偏移，目前需要的步骤就是 在让 菜单 打开或者隐藏的时候，手动触发一次 resize 方法，让v-charts 图形 自适应。 介绍 在网上查找资料的时候，遇到了两种方法， 直接...
javascript之onresize事件
arvin_top的博客
04-19 2092
onresize事件 •onresize 事件会在窗口或框架被调整大小时发生 •window对象支持onresize事件，同时常规标签也都支持（div、textarea、table等） •获取窗口的宽高值 兼容写法如下 •宽度：document.body.clientWidth ||document.documentElement.clientWidth •高度：document.bo
window.onresize
07-15
Vue 中可以使用 $nextTick() 函数来在窗口大小改变时执行代码。例如： ``` mounted() { window.addEventListener...在methods中定义onResize就可以了 ``` methods: { onResize(event) { console.log(event) } } ```
利用onresize使得div可以随着屏幕大小而自适应的代码
12-09
这里定义了`getwah()`函数，它获取document的宽度(`document.documentElement.clientWidth`或`document.body.clientWidth`)，以及div的left属性值。 然后，当屏幕尺寸发生变化时，`onresize`事件触发`test()`函数。...
vue window.onresize
06-28
Vue 中可以使用 $nextTick() 函数来在窗口大小改变时执行代码。例如： ``` mounted() { window.addEventListener...在methods中定义onResize就可以了 ``` methods: { onResize(event) { console.log(event) } } ```
window.onresize 怎么用
03-16
1. 在JavaScript代码中定义一个函数，该函数将在窗口大小改变时被调用。 2. 使用window.onresize属性将该函数与窗口大小改变事件关联起来。 例如，以下代码将在窗口大小改变时调用名为myFunction的函数： ``` ...
JS 自动适应浏览器（onresize事件只执行一次，默认两次)
Henry_lxl的专栏
08-16 1331
var resizeTimer = null;      function doResize()    {           var screenWidth = document.body.offsetWidth;     document.getElementById('frametable').style.left = (screenWidth-990)/2; ...
js window.onresize的使用方法
Be myself
12-02 6825
onresize事件会在窗口或框架被调整大小时发生。 语法 In HTML: <elementonresize="SomeJavaScriptCode"> JavaScript 中: window.onresize=function(){SomeJavaScriptCode}; jQuery中: $(window).resize(function(){ //code }); 详情可查看：https://www.runoob.com/jsref/event-...
JavaScript常见对象操作：事件对象、异步执行、Scroll、Offset、获取屏幕可视区域、onresize、缓动动画、Js获取CSS属性
qq_20535249的博客
07-17 375
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; ...
JavaScript - 顶层window方法onresize() 互相覆盖的问题
idomyway的博客
03-22 4967
前言     在单网页中使用同时使用window.onresize，发现后面onresize方法会把前面的 window.onresize 覆盖掉，有什么办法使所有组件的 window.onresize 都能执行互不影响？ 原因 DOM 顶层事件绑定多次事件会被覆盖，我们可以用addEventListener()方法添加事件监听，这样就可以避免多次使用后面覆...
js中resize()函数的意思
weixin_54048131的博客
09-29 1122
本文章仅用于学习和讨论，如有侵权请联系窗口发生变化：有些时候，我们需要在浏览器窗口发生变化的时候，动态的执行一些操作，比如做自适应页面时的适配。这个时候，我们需要在窗口拖动的时候去执行代码。但是有些时候，执行的操作比较复杂，我们只希望在窗口拖动完毕之后，在执行代码，否则极容易造成浏览器假死状态，这个时候该如何解决呢。
js-window.onresize添加多个被覆盖的问题
月灯雪华
10-20 903
常规写法是// 代码段儿 }但是如果一个页面有多个的情况发生，就只有最后一个生效了。// 代码段儿 })通过addEventListener来添加监听，就可以解决这个问题了。在此记录。
window.onresize可以实现同步页面更新问题+js判断是否为手机
qq_42967540的博客
09-08 289
判断是否为手机： function isMobile() { var userAgentInfo = navigator.userAgent; var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"]; var mobile_flag = false; //根据userAgent判断是否是手机 f
JS resizes事件（UI）
A__loser的博客
05-05 5507
当浏览器窗口被调整到一个新的高度或宽度是，就会触发resize事件。这个事件在window（窗口）上面触发，因此可以通过JavaScript或者<body>元素中的onresize特性来指定事件处理程序.当然我们还是推荐使用JavaScript方式来指定相应的时间处理程序.EventUtil.addHandler(window,"resize",function(event){ alert(
html 页面大小改变事件,js检测浏览器窗口大小被改变触发事件的方法
weixin_42516021的博客
06-03 3592
在前端的web页面中浏览器窗口或者框架的大小被改变时会触发js脚本中的 onresize 事件，当然也可以利用 onresize 事件在浏览器窗口或框架的大小发生改时，可以给用户弹出提示或改变背景颜色，布局等等！简单来说在自适应网站的布局中onresize事件被应用的比较多！js onresize 事件的使用方法1、浏览器窗口被改变时，输出可视区域的高度与宽度示例1：window.onresize...
js清除onclick、onresize等事件监听方法
最新发布
m0_65448891的博客
02-01 768
因为如果很多同时没被清除，那么就会消耗大量内存，导致性能下降。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值