JavaScript中如何还原媒体查询触发的样式变更？

嘿，我明白你的困扰——硬编码还原样式确实很麻烦，尤其是当原始样式来自CSS样式表而非内联定义的时候。这里有几个实用的方法可以帮你解决这个问题：

方法一：提前保存原始样式值 #

在页面初始化时，把元素的原始样式（比如字体大小）保存下来，后续还原时直接使用这个值即可。你可以把值存在元素的dataset属性里，或者单独的变量中，方便后续调用：

// 初始化阶段：获取并保存元素的原始字体大小
// 用getComputedStyle获取元素实际应用的样式（不管来自样式表还是内联）
const originalFontSize = window.getComputedStyle(elms).fontSize;
// 存在元素的dataset中，方便多元素场景复用
elms.dataset.originalFontSize = originalFontSize;

let mQuery = window.matchMedia(`(max-width: ${attributes.size}px)`);

function resize() {
  let change = {
    style: attributes.modifier.split("-")[0],
    by: attributes.modifier.split("-")[1]
  };

  if (mQuery.matches) {
    switch (change.style) {
      case "f":
        elms.style.fontSize = `${change.by}px`;
        break;
    }
  } else {
    switch (change.style) {
      case "f":
        // 使用保存的原始值还原样式
        elms.style.fontSize = elms.dataset.originalFontSize;
        break;
    }
  }
}

// 监听媒体查询变化
mQuery.addListener(resize);
// 页面加载时先执行一次，确保样式正确
resize();

方法二：用CSS类替代直接修改内联样式 #

这是更推荐的做法，把样式逻辑完全交给CSS，JavaScript只负责添加或移除类名。这样当媒体查询不匹配时，只要移除对应的类，元素就会自动回到原始样式，完全不用手动处理样式值：

首先在CSS中定义样式类：

/* 元素的默认样式 */
.target-element {
  font-size: 16px; /* 你的默认字体大小 */
}

/* 媒体查询触发的样式类 */
.target-element.font-24 {
  font-size: 24px;
}

.target-element.font-36 {
  font-size: 36px;
}

然后修改JavaScript代码：

let mQuery = window.matchMedia(`(max-width: ${attributes.size}px)`);

function resize() {
  let change = {
    style: attributes.modifier.split("-")[0],
    by: attributes.modifier.split("-")[1]
  };

  if (mQuery.matches) {
    switch (change.style) {
      case "f":
        // 添加对应的样式类
        elms.classList.add(`font-${change.by}`);
        break;
    }
  } else {
    switch (change.style) {
      case "f":
        // 移除样式类，自动还原原始样式
        elms.classList.remove(`font-${change.by}`);
        break;
    }
  }
}

mQuery.addListener(resize);
resize();

方法三：直接重置内联样式为空 #

如果你的元素原始样式完全来自CSS样式表（没有内联样式），可以直接把对应的样式属性设为空字符串，浏览器会忽略内联样式，自动应用样式表中的规则：

else {
  switch (change.style) {
    case "f":
      // 重置内联fontSize，回到CSS定义的原始样式
      elms.style.fontSize = "";
      break;
  }
}

总结 #

优先推荐第二种方法（CSS类切换），它更符合“关注点分离”的原则，样式逻辑集中在CSS中，JavaScript只负责状态管理，后期维护起来更轻松。如果必须使用内联样式修改，第一种保存原始值的方法更可靠，能覆盖内联和外部样式的场景。

备注：内容来源于stack exchange，提问作者Scollier