div 點擊樣式改變是一種常見的交互效果，可以使網(wǎng)頁更加動態(tài)和用戶友好。通過使用CSS和JavaScript，我們可以實現(xiàn)當(dāng)用戶點擊div元素時，改變其樣式。
在實現(xiàn)之前，我們需要了解一些相關(guān)的基礎(chǔ)知識。，div是HTML中的一個塊級元素，它可以用來創(chuàng)建網(wǎng)頁的不同部分，并且可以通過CSS樣式來修改其外觀。，我們可以使用JavaScript來操作HTML元素，包括改變元素的樣式。
下面是幾個例子，詳細解釋了如何使用div點擊操作來改變樣式。
1. 改變背景顏色
當(dāng)用戶點擊div元素時，我們可以改變其背景顏色。下面的代碼演示了如何通過點擊改變div的背景顏色：

html
<div id="myDiv" onclick="changeColor()"></div>
<br>
<script>
function changeColor() {
var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";
}
</script>

在上面的代碼中，我們使用id屬性給div元素命名為"myDiv"。然后，在JavaScript代碼中，我們通過getElementById()方法獲取該元素，然后使用style屬性來改變其背景顏色為紅色。
2. 改變字體顏色
除了改變背景顏色，我們還可以通過點擊div元素來改變其字體顏色。下面的代碼演示了如何實現(xiàn)這個效果：

html
<div id="myDiv" onclick="changeColor()"></div>
<br>
<script>
function changeColor() {
var myDiv = document.getElementById("myDiv");
myDiv.style.color = "blue";
}
</script>

在上面的代碼中，我們使用相同的方式獲取div元素，然后通過改變其color屬性值為藍色來改變字體顏色。
3. 切換類名
除了直接改變樣式屬性，我們還可以通過切換類名來改變div元素的樣式。下面的代碼演示了如何通過點擊切換類名來改變div元素的樣式：

html
<style>
.red { background-color: red; }
.blue { background-color: blue; }
</style>
<br>
<div id="myDiv" class="red" onclick="changeClass()"></div>
<br>
<script>
function changeClass() {
var myDiv = document.getElementById("myDiv");
if (myDiv.className === "red") {
myDiv.className = "blue";
} else {
myDiv.className = "red";
}
}
</script>

在上面的代碼中，我們定義了兩個類名：red和blue，并為它們設(shè)置了不同的背景顏色。然后，我們使用class屬性將div元素的初始類名設(shè)置為red，并將changeClass()函數(shù)綁定到其onclick事件。在changeClass()函數(shù)中，我們使用條件語句來切換類名，從而改變div元素的樣式。
通過上述幾個例子，我們可以看到通過div點擊操作來改變樣式的效果。這種技術(shù)可以應(yīng)用于許多網(wǎng)頁中，以提高用戶體驗和交互性。
參考：https://www.w3schools.com/howto/howto_js_add_class.asp