使用 JavaScript 切換類
我們將介紹一種使用 JavaScript 切換 HTML 元素類的方法。
在 JavaScript 中滑鼠懸停時切換 HTML 元素的類
切換類意味著如果沒有為 HTML 元素分配類名，則可以動態為其設定類名，或者如果特定類已經存在，則可以動態刪除它。在計算中，滑鼠懸停是當使用者將指標移動或懸停在觸發區域上時啟用的圖形控制元素，通常使用滑鼠。
JavaScript 中引入了切換功能。在 JavaScript 檔案中，我們使用 querySelector() 方法返回與文件中指定的 CSS 選擇器匹配的第一個元素。在下面的檔案中，#container id 與 <div> 元素相關聯；因此我們在變數容器上得到了 <div> 元素。為了實現在滑鼠懸停時切換類所需的功能，我們需要使用 addEventListener() 方法，該方法將事件處理程式附加到 HTML 文件。我們使用的實際事件是 mouseenter 和 mouseleave 事件。mouseenter 事件發生在滑鼠指標移動到元素上時。mouseleave 事件在滑鼠指標移出元素時發生。
當 mouseenter 事件發生時，我們使用 classList 屬性、add() 和 remove() 方法。當滑鼠指標移動到 <div> 元素類上時，第一個 div 元素被 remove() 方法移除，而 second 類被新增到 <div> 元素。類似地，當滑鼠指標移出時，它會新增類 first 並刪除類 second。因此，當滑鼠懸停在 <div> 元素上時實現切換。
我們有一個 HTML 文件，其中分別使用 <link> 和 <script></script> 標籤在 HTML 文件上指定了指向 CSS 檔案 styles.css 和 JavaScript 檔案 index.js 的連結。我們想要實現將滑鼠指標懸停在要切換的 <div> 元素上的功能。我們將使用 JavaScript 來做到這一點。在 HTML 中，我們有由 id 容器唯一標識的 <div> 元素，並且類 first 已經與同一個元素相關聯。
在 CSS 中，我們定義類選擇器的屬性和值。我們使 CSS 變得簡單，類 first 有一個屬性 background，其值為綠色。類似地，類 second 有一個屬性 background 並且值為 orange。
示例程式碼：
<div id="container" class="first">
<h1>
JavaScript is Easy
</h1>
</div>
var container = document.querySelector('#container');
container.addEventListener('mouseenter', function() {
this.classList.remove('first');
this.classList.add('second');
})
container.addEventListener('mouseleave', function() {
this.classList.add('first');
this.classList.remove('second');
})
.first {
background: green;
}
.second {
background: orange;
}
在 JavaScript 中單擊滑鼠時切換 HTML 元素的類
我們可以在滑鼠單擊時使用 JavaScript 切換 HTML 類，就像我們在上面的方法中為滑鼠懸停在事件上所做的那樣。例如，建立一個帶有 <p> 標籤、id 為 p 的段落。在標籤內寫一些文字。然後，建立一個帶有 onclick 屬性的 <button> 標籤。使用 onclick 屬性呼叫函式 myFunc()。在標籤之間寫入文字 Button。
在 CSS 中，使用類選擇器選擇 paragraphClass，並將 font-size 設定為 30px，將 color 設定為 red。在 JavaScript 中，編寫 myFunc() 函式並使用 getElementById 選擇 HTML 的 p id 並儲存在 para 變數中。使用變數呼叫 classList 屬性，然後呼叫 toggle() 方法。編寫 paragraphClass 類作為 toggle() 方法的引數。
我們使用 getElementById() 方法獲取了變數 para 中的 p 元素。使用 classList 屬性，我們使用 toggle() 函式來 <p> HTML 文件的元素。當點選底部並執行 myFunc() 時，CSS 類選擇器 paragraphClass 在 <p> 元素上開啟和關閉。因此，通過單擊滑鼠底部來實現切換。
示例程式碼：
<p id="p">
Click Button to toggle between classes
</p>
<button onclick="myFunc()">
Button
</button>
.paragraphClass {
font-size: 30px;
color: red;
}
function myFunc() {
var para = document.getElementById('p');
para.classList.toggle('paragraphClass');
}