TL;DR: 使用element.classList上的add()方法 當你有一個DOM元素的引用時，你可以使用add方法向其添加一個新的類別： element.classList.add('myclass') 你可以使用remove方法來刪除一個類別： element.classList.remove('myclass') 實現細節：classList不是一個陣列，而是一個DoucmentFragment的集合。 你無法直接編輯classList，因為它是一個只讀屬性。不過，你可以使用其方法來修改元素的類別。
簡介 在瀏覽器中的 JavaScript 使用事件驅動的程式設計模型。 一切都是從遵循事件開始。 事件可能是 DOM 載入完成，或一個非同步請求完成取得資源，或是使用者點擊元素或滾動頁面，或是使用者在鍵盤上輸入等等。 有很多不同種類的事件。 事件處理程序 您可以使用事件處理程序來回應任何事件，它是在事件發生時呼叫的函式。 您可以為同一個事件註冊多個處理程序，當該事件發生時，它們都將被呼叫。 JavaScript 提供三種方式來註冊事件處理程序： 內聯事件處理程序 這種風格的事件處理程序很少被使用，因為它的限制，但在 JavaScript 的早期，這是唯一的方式: <a href="site.com" onclick="dosomething();">A link</a> DOM on-event 處理程序 這通常用於只有一個事件處理程序的對象上，因為在這種情況下無法添加多個處理程序： window.onload = () => { //window loaded } 在處理 XHR 請求時最常遇到： const xhr = new XMLHttpRequest() xhr.onreadystatechange = () => { //.. do something } 您可以使用 if ('onsomething' in window) {} 檢查是否已經為屬性指定了處理程序。 使用 addEventListener() 這是現代的方式。這種方法允許我們註冊所需數量的處理程序，並且這是最常見的方式： window.addEventListener('load', () => { //window loaded }) 注意，IE8 及更低版本不支援這種方式，而是使用自己的 attachEvent() API。如果需要支援較早的瀏覽器，請牢記這一點。...