<div>元素是HTML中的一個(gè)重要標(biāo)簽，用來(lái)定義文檔中的一個(gè)區(qū)塊。通過(guò)使用CSS，我們可以對(duì)<div>元素進(jìn)行顯示和隱藏的操作。顯示和隱藏是網(wǎng)頁(yè)開發(fā)中非常常見(jiàn)的需求，可以通過(guò)控制<div>元素的display屬性來(lái)實(shí)現(xiàn)。
<div>元素的CSS display屬性有多個(gè)取值，其中包括以下幾種常用值： - block：將<div>元素作為塊級(jí)元素顯示，占據(jù)一整行； - inline：將<div>元素作為內(nèi)聯(lián)元素顯示，不獨(dú)占一行，與其他元素在同一行顯示； - none：隱藏<div>元素，不占據(jù)頁(yè)面空間。
下面我們通過(guò)幾個(gè)代碼案例來(lái)詳細(xì)解釋<div>元素的顯示和隱藏。
代碼案例1：

html
<p>點(diǎn)擊按鈕顯示<div>元素：</p>
<button onclick="showDiv()">顯示</button>
<div id="myDiv">這是一個(gè)<div>元素</div></div>
<br>
<script>
function showDiv() {
document.getElementById("myDiv").style.display = "block";
}
</script>

在這個(gè)案例中，我們?cè)陧?yè)面上創(chuàng)建了一個(gè)按鈕和一個(gè)<div>元素。按鈕的onclick事件綁定了showDiv()函數(shù)。當(dāng)我們點(diǎn)擊按鈕時(shí)，showDiv()函數(shù)會(huì)被調(diào)用，通過(guò)修改<div>元素的display屬性為"block"，實(shí)現(xiàn)了將<div>元素顯示出來(lái)的效果。
代碼案例2：

html
<p>鼠標(biāo)懸停顯示<div>元素：</p>
<div onmouseover="showDiv()" onmouseout="hideDiv()">懸停在我上面</div>
<div id="myDiv" style="display:none;">這是一個(gè)<div>元素</div></div>
<br>
<script>
function showDiv() {
document.getElementById("myDiv").style.display = "block";
}
<br>
function hideDiv() {
document.getElementById("myDiv").style.display = "none";
}
</script>

在這個(gè)案例中，我們使用了鼠標(biāo)懸停事件來(lái)控制<div>元素的顯示和隱藏。當(dāng)鼠標(biāo)懸停在<div>元素上時(shí)，showDiv()函數(shù)會(huì)被調(diào)用，通過(guò)修改<div>元素的display屬性為"block"，實(shí)現(xiàn)了將<div>元素顯示出來(lái)的效果。當(dāng)鼠標(biāo)離開<div>元素時(shí)，hideDiv()函數(shù)會(huì)被調(diào)用，通過(guò)修改<div>元素的display屬性為"none"，實(shí)現(xiàn)了將<div>元素隱藏的效果。
通過(guò)以上兩個(gè)代碼案例，我們可以看到通過(guò)修改<div>元素的display屬性，可以實(shí)現(xiàn)對(duì)<div>元素的顯示和隱藏操作。這樣的功能在實(shí)際的網(wǎng)頁(yè)開發(fā)中非常有用，可以根據(jù)需要靈活地控制元素的可見(jiàn)性，提升用戶體驗(yàn)。+