如何更改CSS偽類

在CSS中，偽類是一種特殊的選擇器，用于選擇處于特定狀態(tài)的元素。:hover偽類可以選擇鼠標(biāo)懸停的元素，CSS偽類的默認(rèn)樣式可能不符合我們的需求，那么如何在JavaScript中更改CSS偽類的樣式呢？

我們需要獲取要更改樣式的元素，可以使用document.querySelector()方法選擇元素，或者使用document.getElementsByTagName()方法獲取所有元素。

我們可以使用Element.style屬性來更改元素的樣式，要更改:hover偽類的背景顏色，可以使用以下代碼：

let elements = document.getElementsByTagName('div'); // 獲取所有div元素
for (let i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = 'red'; // 將所有div元素的背景顏色更改為紅色
}

上述代碼只會更改所有div元素的背景顏色，而不會特別針對:hover偽類，為了解決這個問題，我們可以使用Element.classList屬性來添加或刪除類名，并使用CSS類來定義偽類的樣式，在CSS中添加以下樣式：

div:hover {
  background-color: red;
}

在JavaScript中添加或刪除類名：

let elements = document.getElementsByTagName('div'); // 獲取所有div元素
for (let i = 0; i < elements.length; i++) {
  elements[i].classList.add('hover'); // 添加類名'hover'
}

這樣，當(dāng)鼠標(biāo)懸停在div元素上時，背景顏色就會變?yōu)榧t色，如果需要移除偽類的樣式，可以使用Element.classList.remove()方法刪除類名。