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

我想要一个正常的按钮样式。然后点击，它会变成绿色。然后3秒钟后，它将恢复到正常风格。使用setTimeout延迟按钮的样式更改

我可以通过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）犯规火，我得到 “ELEM” 未定义的NORMALCOLOR功能。

如果我去掉额外的代码，只要改变它的样式就可以了。它只是让第二部分翻转回来，这是行不通的。

来源

2017-05-30 noook

你真的不需要3层的功能在这里。我们可以通过在点击时应用CSS类来简化这一点，然后简单地在一个延迟3秒的函数中移除该类。这个小小的“诀窍”非常方便，因为通过删除一个类，该元素将恢复为在添加类之前生效的任何样式 - - 您无需执行任何操作即可恢复旧样式！

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

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

// 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); 
 
}

/* 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; 
 
}

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

来源

2017-05-30 17:46:54

我喜欢这个答案，尤其是部分“关注点分离”是什么，我觉得很重要的。另外，我认为这个代码更清洁。此外，浏览器可能会缓存CSS，而这些内联属性无法做到。 – SVSchmidt

谢谢。这比我的思考过程要干净得多，并且对于关于onclick事件的链接更有意义。对此，我真的非常感激。 – noook

@nokaoii不客气。顺便说一下，如果您喜欢关于不使用内联HTML事件属性的链接答案，请随时投票回答。 ;） –

你也许云收到的参数，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>

来源

2017-05-30 17:45:32

线的东西这是你想要的？

你错字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>

来源

2017-05-30 17:45:45

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

回答

相关问题