CSS樣式隱藏顯示怎么寫

在CSS中，我們可以使用“display”屬性來隱藏或顯示元素，這個(gè)屬性接受多種值，包括“none”（隱藏元素）、“block”（將元素顯示為塊級(jí)元素）、“inline”（將元素顯示為行內(nèi)元素）等，下面是一個(gè)簡(jiǎn)單的例子，展示如何使用CSS來隱藏和顯示元素：

#myElement {
  display: none; /* 隱藏元素 */
}
#myElement.show {
  display: block; /* 顯示元素 */
}

在上面的代碼中，我們首先將“#myElement”元素的display屬性設(shè)置為“none”，這將隱藏該元素，我們?yōu)橥粋€(gè)元素添加了一個(gè)名為“show”的類，這個(gè)類將display屬性設(shè)置為“block”，這將使元素重新顯示出來。

我們可以通過JavaScript來動(dòng)態(tài)地添加或移除這個(gè)類，從而實(shí)現(xiàn)元素的隱藏和顯示，我們可以編寫一個(gè)函數(shù)來切換元素的顯示狀態(tài)：

function toggleDisplay() {
  var myElement = document.getElementById('myElement');
  if (myElement.style.display === 'none') {
    myElement.style.display = 'block';
  } else {
    myElement.style.display = 'none';
  }
}

在上面的JavaScript代碼中，我們編寫了一個(gè)名為“toggleDisplay”的函數(shù)，用于切換“#myElement”元素的顯示狀態(tài)，我們使用了一個(gè)if語句來檢查元素的當(dāng)前顯示狀態(tài)，并根據(jù)需要設(shè)置新的顯示狀態(tài)，我們可以使用addEventListener方法來添加對(duì)這個(gè)函數(shù)的調(diào)用，

document.getElementById('myButton').addEventListener('click', toggleDisplay);

在上面的代碼中，我們將一個(gè)按鈕的點(diǎn)擊事件處理程序設(shè)置為調(diào)用“toggleDisplay”函數(shù)，這將使按鈕能夠控制元素的顯示狀態(tài)。