2025年3月24日 星期一 甲辰(龙)年 月廿三 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JS resize事件:窗口重置

时间:03-07来源:作者:点击数:71

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) { //兼容DOM
  • return window.innerWidth;
  • else if ((document.body) && (document.body.clientWidth)) //兼容IE
  • return document.body.clientWidth;
  • }
  • function h () { //获取窗口高度
  • if (window.innerHeight) { //兼容DOM
  • return window.innerHeight;
  • else if ((document.body) && (document.body.clientHeight)) //兼容IE
  • return document.body.clientHeight;
  • }
  • </script>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门