JavaScript是一種流行的腳本語言，廣泛應用于網頁開發中。在網頁中，我們常常需要動態地修改頁面元素的class值來實現動畫效果、樣式改變等功能。在本文中，我們將探討JavaScript如何修改class值。
要修改元素的class值，首先要獲取該元素的引用。在JavaScript中，可以通過多種方式獲取頁面元素的引用，例如使用document.getElementById()方法、document.querySelector()方法等。下面以document.getElementById()方法為例：

html
<p id="example" class="old-class">這是一個例子</p>

javascript
var pElem = document.getElementById("example");

現在我們已經獲取了這個段落元素的引用，接下來就是如何修改它的class值。通常有兩種方式可以達到目標：替換或添加class值，或者刪除指定的class值。
#### 替換或添加class值
我們可以使用元素的classList屬性來操作它的class值。classList是一個DOMTokenList對象，包含了元素的class值列表。該列表有add()方法、remove()方法、toggle()方法等，可以方便地操作class值。
下面的代碼演示如何將一個元素的class值由"old-class"替換成"new-class"：

javascript
pElem.classList.remove("old-class");
pElem.classList.add("new-class");

在執行完上述代碼后，原來的class值"old-class"已經被刪除，而新的class值"new-class"已經被添加。
我們也可以使用toggle()方法來切換class值的狀態。當元素沒有指定的class值時，toggle()會將它添加進去；當元素已經有指定的class值時，toggle()會將它刪除。
下面的代碼演示如何切換一個元素的class值：

javascript
pElem.classList.toggle("highlight");

在執行完上述代碼后，如果元素原來沒有"highlight"這個class值，那么它會被添加進去；如果元素原來已經有"highlight"這個class值，那么它會被刪除。
#### 刪除指定的class值
除了替換或添加class值外，我們也可以直接刪除指定的class值。為了刪除指定的class值，我們需要使用元素的classList屬性以及remove()方法。
下面的代碼演示如何刪除一個元素的class值：

javascript
pElem.classList.remove("old-class");

在執行完上述代碼后，元素的class值"old-class"已經被刪除。
需要注意的是，當元素的class值中有多個class名稱時，我們需要分別對每個class名稱進行操作。例如，下面的代碼演示如何將元素的class值中的"old-class"和"extra-class"都刪除：

javascript
pElem.classList.remove("old-class", "extra-class");

通過以上方法我們可以方便地操作頁面元素的class值，實現各種動態效果和樣式變化。當然，還有更多關于JavaScript修改class值的技巧等待我們去挖掘和探索。