在 JavaScript 中鼠标移出时恢复为旧 CSS

Question

我正在使用以下函数在 TAG 上设置 CSS 样式：function setStyle (styles = {}, tag){    let key;    for (key in styles) {        if (!styles.hasOwnProperty(key))           continue;        tag.style[key] = styles[key];    }    return tag;}我创建了另一个函数，它将在鼠标悬停时应用新的 CSS 样式并在鼠标悬停时恢复为旧 CSS：function hoverCss(styleSet = {}, tag) {        const oldCss = tag.style;        tag.onmouseover = () => {            // console.info('APPLY NEW CSS');            setStyle(styleSet, tag);        };        tag.onmouseleave = () => {            // console.info('RESTORE OLD CSS');            setStyle(oldCss, tag);        };        return tag;    }当我执行上面的代码时，新的 CSS 在鼠标悬停时应用，但旧的 CSS 在鼠标离开时没有应用回来。请提供此错误的解决方案。编辑调用函数的其余代码如下所示：const tag = document.getElementById('someId');hoverCss({color:'red'}, tag);感谢和问候

Answer 1

认为这最好用纯 css 实现

.element {

  // Add your element styles here

}

.element:hover {

 // Add styles here to be applied when element is hovered over

}

Answer 2

尝试使用此语法

target.addEventListener('mouseleave', () => {

  setStyle(oldCss, tag);

});

Answer 3

这种行为是因为 js 威胁每个引用的对象，所以，当你这样做时const oldCss = tag.style，oldCss对象指向相同的内存地址tag.style

tag.style因此，当您更改它的某些属性时oldCss，const 声明只是说您不能更改 oldCss 值，而不是它的孩子

您必须const oldCss = JSON.parse(JSON.stringify(tag.style))避免引用行为