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）没有触发，我得到了＃ele;＆＃34;在normalColor函数上未定义。

如果我删除额外的代码，只要一旦工作正常就改变样式。它只是让第二部分将它翻转回来，但这不起作用。

Answer 1

这是你想要的吗？

你有拼写错误elem.sytle.color = '';它应该是style 你需要调用newColor函数onClickDelayEvent

＆＃13;

<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>

＆＃13;

Answer 2

你真的不需要3个功能。我们可以通过在点击时应用CSS类然后简单地在延迟3秒的函数中删除该类来简化这一过程。这个小小的＆＃34;技巧＆＃34;是如此方便，因为通过删除一个类，该元素将恢复为添加类之前生效的任何样式 - - 您不必做任何事情来恢复旧样式！

此外，依赖于添加或删除类允许一次应用或删除多个样式，而不是使用单个样式。

最后，请勿使用内联HTML事件属性（onclick等）， here's 原因。

＆＃13;

// Get button reference
var btn = document.getElementById("copyButton");

// Set up event handler (do this in JavaScript, not HTML)
btn.addEventListener("click", clickDelay);

function clickDelay(evt) {
    evt.target.classList.add("special");
    setTimeout(function(){
      evt.target.classList.remove("special");
    },3000);
}

＆＃13;

/* This class will be immediately added upon a click
   and then removed 3 seconds later, causing the button
   to return to its original style. */
.special { 
  background-color:green;
  color:white;
}

＆＃13;

<button id="copyButton">Copy</button>

＆＃13;

Answer 3

你云可能会收到onClickDelayEvent的参数，并直接在函数中使用它......

<script type="text/javascript">

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

</script>

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

3 个答案: