div 方塊 變色

在網頁設計和開發中，div（也稱為“division”）是一個常見的HTML元素，用于將網頁的內容劃分為不同的區域。 div元素可以通過CSS樣式表來修改其外觀和行為。其中之一是通過改變div的背景顏色來實現變色效果。本文將通過幾個代碼案例來詳細解釋如何使用div方塊來實現變色效果。

案例一：鼠標懸停變色

在這個案例中，我們將通過鼠標懸停在div方塊上時改變其背景顏色。以下是相關的HTML和CSS代碼：

<div class="color-box">我的方塊</div>
<br>
<style>
.color-box {
width: 200px;
height: 200px;
background-color: blue;
}
<br>
.color-box:hover {
background-color: red;
}
</style>

上述代碼中，我們使用了一個名為“color-box”的div元素，并設置其初始背景顏色為藍色。通過:hover偽類選擇器，在鼠標懸停在方塊上時，將背景色改變為紅色。

案例二：點擊按鈕變色

在這個案例中，我們將通過點擊按鈕來改變div方塊的背景顏色。以下是相關的HTML和JavaScript代碼：

<div id="color-box" class="color-box">我的方塊</div>
<br>
<button onclick="changeColor()">點擊變色</button>
<br>
<style>
.color-box {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<br>
<script>
function changeColor() {
var box = document.getElementById("color-box");
box.style.backgroundColor = "green";
}
</script>

上述代碼中，我們使用了一個id為“color-box”的div元素，并添加了一個點擊按鈕。在JavaScript函數changeColor()中，我們通過使用getElementById()方法獲取div元素的引用，并將其背景顏色改為綠色。

案例三：定時變色

在這個案例中，我們將使用JavaScript的定時器功能來實現div方塊的定時變色。以下是相關的HTML和JavaScript代碼：

<div id="color-box" class="color-box">我的方塊</div>
<br>
<style>
.color-box {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<br>
<script>
function changeColor() {
var box = document.getElementById("color-box");
var colors = ["red", "green", "blue"];
var currentIndex = 0;
<br>
  setInterval(function() {
box.style.backgroundColor = colors[currentIndex];
currentIndex = (currentIndex + 1) % colors.length;
}, 1000);
}
changeColor();
</script>

上述代碼中，我們定義了一個名為changeColor()的函數，該函數使用了setInterval()方法來定時改變div方塊的背景顏色。在每次定時器觸發時，我們通過修改currentIndex的值來選擇下一個背景顏色。這樣，每隔一秒，div方塊的背景顏色就會依次改變為紅色、綠色、藍色。

通過以上案例，我們詳細解釋了如何使用div方塊來實現變色效果。無論是通過鼠標懸停、點擊按鈕還是定時變色，我們都可以利用CSS和JavaScript來輕松實現各種有趣的變色效果，增加網頁的交互性和吸引力。