在浏览器窗口大小调整时更改 JS 逻辑

Change JS Logic Upon Browser Window Resize

本文关键字：JS 逻辑 浏览器 窗口大小 调整      更新时间：2023-09-26

随着使用 CSS @media 查询的流行，我们现在可以根据查看网页的分辨率设置网页样式。当您调整浏览器窗口的大小时，与宽度相关的样式/布局将立即发生。在CSS中，这非常简单，例如

// The heart of "responsive design."
@media screen and (max-width: 1000px) { ... }

本着响应式设计的精神，我们可以在分辨率更改时即时调整 JavaScript 逻辑吗？例如，如果我们的脚本每 10 秒输出一个数字"5"，那么当浏览器窗口调整为 <300px 时，我们可以将其更改为输出"7"（以相同的间隔）吗？

// Default script
setTimeout(function() {
  var i = 5;
  console.log(i);
}, 10000);
// How to change the value of i to 7, upon window resize?
// Ideally, without a page reload.

处理 window.resize 事件：

window.onresize = function () {
    // check if the new height/width is <300
    // change your i variable
};

为了使此操作正常工作，i变量必须位于由调整大小处理程序和传递给 setTimeout 的匿名对象共享的作用域中。

获取窗口高度/宽度的答案。

如果你想要每 10 秒显示一个数字（基于 with），代码是这样的：

setInterval(function() {
    var num = (window.outerWidth <= 300) ? 7 : 5;
    console.log(i);
}, 10000);

如果你想要的是显示窗口大小时的数字，你应该处理window.resnaping事件，正如@jbabey回答的那样。

你不能准确地在CSS和JS之间传递变量，但Javascript公开了resize事件，你可以将其绑定到window。

例如：

function (event) {
  if (event.srcElement.outerWidth <= 1000 ){
    // do something
  }
}

工作 JSFiddle 演示

相关文章：