如何為DOM元素新增類別

TL;DR: 使用element.classList上的add()方法 當你有一個DOM元素的引用時,你可以使用add方法向其添加一個新的類別: element.classList.add('myclass') 你可以使用remove方法來刪除一個類別: element.classList.remove('myclass') 實現細節:classList不是一個陣列,而是一個DoucmentFragment的集合。 你無法直接編輯classList,因為它是一個只讀屬性。不過,你可以使用其方法來修改元素的類別。

解析 JavaScript 事件

簡介 在瀏覽器中的 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。如果需要支援較早的瀏覽器,請牢記這一點。...