使用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延遲按鈕的樣式更改

回答

相關問題