在 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)) 以避免引用行为

Answer 4

你必须像这样在函数 hover 之外声明你的 oldCss 对象来解决你的问题

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

    function hoverCss(styleSet = {}, tag) {
        elementStyle = tag.style;
        oldCss = {}
        var computedStyle = window.getComputedStyle(tag, null);
        // get the default css as object and keep it 
        for (prop in elementStyle) {
            if (elementStyle.hasOwnProperty(prop)) {
                oldCss[prop] = elementStyle[prop];
            }
        }
        // If the newCss has something isn't in the oldcss so keep that as empty
        for (let property in styleSet) {
            if (!oldCss.hasOwnProperty(property)) {
                oldCss[property] = '';
            }
        }
        tag.addEventListener('mouseenter', function () {
            setStyle(styleSet, this);
        });

        tag.addEventListener('mouseout', function () {
            setStyle(oldCss, this);
        });

        return tag;
    }

    const tag = document.getElementById('someId');
    hoverCss({ color: 'red' }, tag);

我知道你这样做可能是因为你需要使用 JS 来控制你的 css