onresize 事件动态获取窗口大小

在 JavaScript 中，resize 事件是在浏览器窗口被重置时触发的，如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。利用该事件可以跟踪窗口大小的变化以便动态调整页面元素的显示大小。
示例
下面的示例能够根据跟踪窗口大小变化及时调整页面内红色盒子的大小，使其始终保持与窗口固定比例的大小显示。

<div id="box"></div>
<script>var box = document.getElementById("box");  //获取盒子的指针引用box.style.position = "absolute";  //绝对定位box.style.backgroundColor = "red";  //背景色box.style.width = w() * 0.8 + "px";  //设置盒子宽度为窗口宽度的0.8倍box.style.height = h() * 0.8 + "px";  //设置盒子高度为窗口高度的0.8倍window.onresize = function () {  //注册事件处理函数，动态调整盒子大小box.style.width = w() * 0.8 + "px";box.style.height = h() * 0.8 + "px";}function w () {  //获取窗口宽度if (window.innerWidth) {  //兼容DOMreturn window.innerWidth;else if ((document.body) && (document.body.clientWidth))  //兼容IEreturn document.body.clientWidth;}function h () {  //获取窗口高度if (window.innerHeight) {  //兼容DOMreturn window.innerHeight;else if ((document.body) && (document.body.clientHeight))  //兼容IEreturn document.body.clientHeight;}
</script>

onresize 事件动态获取窗口大小相关推荐

onresize 事件；浏览器窗口大小调整
先上一个完整demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
利用 onresize 事件，实现页面大小随浏览器窗口变化
前言在日常开发中,可能会遇见页面(元素)大小随浏览器窗口变化的需求.本文就记录了如何利用 onresize 事件,实现这样效果. 思路利用onresize 事件会在窗口大小发生变化时触发的特点,结 ...
Vue进阶（幺叁柒）：window.onresize事件在vue项目中的应用
属性 window.onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数. 在窗口大小改变之后,就会触发resize事件. //vue页面 <template>& ...
ajax怎样获得表头信息,layui.table动态获取表头和列表数据示例
layui.table动态获取表头和列表数据示例 2020年07月14日 | 萬仟网IT编程 | 我要评论 ```javascript//表格layui.use('table', function() ...
xcode动态改变窗口大小_详细的理论要点+3个经典案例，帮助你深入理解动态面板...
什么是动态面板动态面板是Axure的高级交互元件,由不同的状态面板组成,是我们制作交互过程中运用频率最高的元件,很多交互效果需要依赖动态面板实现.动态面板的状态面板就像是一个容器,我们可以在里面放置 ...
Echarts3通过ajax动态获取数据，30秒定时图表数据,设置图表线条颜色和粗细
Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细代码块 <!DOCTYPE html> <head><meta charset=&q ...
如何解决mui-scroll-wrapper组件在动态获取数据时滚动或者滑动失效的问题（亲测有效）
第一次些博客,如果有写的不好的地方,请见谅!! ##由于需要使用MUI制作公司的一个APP,因此跟着MUI官方帮助文档进行了代码的测试,大部分组建都能够达到想要的效果,但是在测试popover+scr ...
Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小
文章目录一.目标原型 1. 目标 2. 原型设计 3. 原型初步实现二.无边框窗口 1. 要点 2. 改造三.可拖拽区 1. 要点 2. 改造四.最小化.最大化.关闭 1. 要点 2. 改造 ...
运用delphiXE RTTI在运行时动态获取信息及获取某个TComponent类或TObject类的RttiType信息的案例
运用delphiXE RTTI在运行时动态获取信息及获取某个TComponent类或TObject类的RttiType信息的案例一.理解RTTI 先看看官方文档:http://docwiki.emb ...

onresize 事件动态获取窗口大小

onresize 事件动态获取窗口大小相关推荐

最新文章

热门文章