原生JS窗口resize修改body背景色仅刷新生效问题求助

你需要给window对象绑定resize事件监听，每次窗口尺寸调整时自动触发你的判断函数，以下是可直接使用的修改方案：

基础实现（无优化） #

直接绑定resize事件即可生效：

const doit = () => {
  if(window.innerWidth < 500) {
    document.body.style.background = "red";
  } else {
    document.body.style.background = "green";
  }
}
// 页面首次加载执行一次
doit();
// 监听窗口大小变化，每次调整自动触发执行
window.addEventListener('resize', doit);

优化版本（带防抖） #

resize事件会在窗口调整过程中高频触发，添加防抖逻辑可以避免不必要的性能消耗：

// 防抖工具函数，默认延迟100ms执行
const debounce = (fn, delay = 100) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), delay);
  }
}

const doit = () => {
  document.body.style.background = window.innerWidth < 500 ? "red" : "green";
}

doit();
// 绑定防抖后的处理函数
window.addEventListener('resize', debounce(doit));

可选方案：纯CSS实现 #

如果没有额外的逻辑需求，这个样式切换场景完全可以用CSS媒体查询实现，更简单高效：

body {
  background-color: green;
}
@media (max-width: 499px) {
  body {
    background-color: red;
  }
}

内容的提问来源于stack exchange，提问作者Ren Jitsm