javascript - 使用 setTimeout 延迟按钮上的样式更改

Question

我想要一个正常样式的按钮。然后点击，它会变成绿色。然后 3 秒后它将恢复到正常样式。

我可以使用 onClick 获取按钮来更改对我的脚本的调用，但是当我尝试在函数中工作以将其恢复为正常颜色时出现范围错误。

Javascript:

<script type="text/javascript">

function onClickDelayEvent () {
    function newColor(elem) {
        elem.style.background = 'green';
        elem.style.color = 'white';
    }
    function normalColor(elem) {
        elem.style.background = '';
        elem.sytle.color = '';
    }
    setTimeout(normalColor,3000);
    }

</script>

HTML:

<button id="copyButton" onclick="onClickDelayEvent(this)">Copy</button>

第一个函数 (newColor) 没有触发，我在 normalColor 函数上得到未定义的“elem”。

如果我去掉多余的代码，并在它正常工作后更改样式。只是让第二部分将其翻转回去，这是行不通的。

Answer 1

这是你想要的吗？

你打错了 elem.sytle.color = ''; 它应该是 style你需要调用 newColor 函数 onClickDelayEvent

<script type="text/javascript">

function onClickDelayEvent (elem) {
   
    function newColor(elem) {
        elem.style.background = 'green';
        elem.style.color = 'white';
    }
    function normalColor(elem) {
        elem.style.background = '';
        elem.style.color = 'black';
    }
    setTimeout(normalColor,3000,elem);
    newColor(elem);
    }

</script>

<button id="copyButton" onclick="onClickDelayEvent(this)">Copy</button>