JavaScript鼠标移出无法恢复旧CSS样式问题的解决方案求助

这个bug的核心原因很清晰：你直接把tag.style赋值给了oldCss，但tag.style是引用类型的CSSStyleDeclaration对象——当你在鼠标悬停时修改元素样式，这个对象本身的内容会被同步改变，所以鼠标移出时你试图恢复的"旧样式"其实已经变成了新样式，自然达不到预期效果。

修复方案 #

我们需要把元素当前的内联样式复制到一个独立的普通对象中，切断和原style对象的引用关系，这样后续修改元素样式就不会影响保存的旧样式。同时，为了彻底清除悬停时添加的新样式，还要处理那些旧样式中没有的属性，将其置为空。

修复后的完整代码如下：

function setStyle (styles = {}, tag){
  let key;
  for (key in styles) {
    if (!styles.hasOwnProperty(key)) continue;
    tag.style[key] = styles[key];
  }
  return tag;
}

function hoverCss(styleSet = {}, tag) {
  // 复制当前元素的所有内联样式到普通对象，保存原始状态
  const oldCss = {};
  for (const prop of tag.style) {
    oldCss[prop] = tag.style[prop];
  }

  tag.onmouseover = () => {
    setStyle(styleSet, tag);
  };

  tag.onmouseleave = () => {
    // 构建恢复样式：包含旧样式 + 清空新样式中额外的属性
    const restoreStyles = {...oldCss};
    for (const key in styleSet) {
      if (!(key in restoreStyles)) {
        restoreStyles[key] = '';
      }
    }
    setStyle(restoreStyles, tag);
  };

  return tag;
}

// 调用方式不变
const tag = document.getElementById('someId');
hoverCss({color:'red'}, tag);

关键细节说明 #

1. 保存旧样式：通过遍历tag.style的属性，把每个有值的内联样式复制到oldCss普通对象中，确保旧样式不会被后续修改影响。
2. 清除残留样式：在恢复时，我们检查新样式中的所有属性，如果旧样式里没有对应的属性，就把它设为空字符串，这样可以彻底清除悬停时新增的内联样式，避免残留。

如果你的元素样式是通过外部/内部样式表设置的（不是内联样式），tag.style无法获取这些样式值。这种情况下可以使用getComputedStyle(tag)来获取计算后的完整样式，但需要注意getComputedStyle返回的是只读对象，且部分属性是复合属性，处理起来需要额外适配——不过根据你的调用场景，上面的修复已经能解决问题。

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