如何基于window.innerWidth实现元素动态切换与还原？

不需要添加额外的事件监听器，只需要在同一个resize事件处理函数里补充窗口宽度恢复时的逻辑，同时建议先缓存初始内容（避免硬编码还原内容，适配初始HTML可能的修改），还要处理页面加载时的初始宽度判断（防止页面加载时宽度已经≤1000但未触发resize）。

修改后的代码如下：

HTML #

<div>
  <h1>My Name</h1>
</div>

JavaScript #

const parentDiv = document.querySelector('div');
// 缓存初始的HTML内容
const originalContent = parentDiv.innerHTML;

// 定义统一的处理函数，方便复用
function handleResize() {
  if (window.innerWidth <= 1000) {
    parentDiv.innerHTML = '<p>lorem Ipsum</p>';
  } else {
    // 还原初始内容
    parentDiv.innerHTML = originalContent;
  }
}

// 页面加载时先执行一次，处理初始宽度
handleResize();
// 绑定resize事件
window.addEventListener('resize', handleResize);

关键说明 #

• 缓存originalContent：如果后续初始的<h1>My Name</h1>有修改，不需要再改JS代码，更灵活。
• 复用handleResize函数：既处理页面加载的初始状态，也处理窗口大小变化的状态，避免重复代码。
• 同一个resize事件足够：窗口大小变化（不管是缩小还是放大）都会触发该事件，所以在事件内通过条件判断处理两种状态即可，无需额外绑定其他事件。

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