怎么寫js點擊事件后顯示css樣式，JS點擊事件后顯示CSS樣式

前端小編 2024-12-19 09:42:27 6 0

在網頁開發(fā)中，我們經常需要處理用戶點擊事件，并在點擊后顯示特定的CSS樣式，下面是一些實現這一功能的步驟和示例代碼。

1. HTML結構

我們需要一個HTML元素來綁定點擊事件和CSS樣式，我們可以使用一個簡單的按鈕：

<button id="myButton">點擊我</button>

2. CSS樣式

我們需要定義一些CSS樣式，我們可以定義一個簡單的背景顏色變化：

#myButton {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
#myButton.active {
  background-color: #e0e0e0;
}

3. JavaScript實現

我們需要使用JavaScript來綁定點擊事件，并在點擊后顯示CSS樣式：

document.getElementById('myButton').addEventListener('click', function() {
  // 添加active類來顯示不同的樣式
  this.classList.add('active');
});

完整示例代碼

下面是一個完整的示例代碼，展示了如何實現點擊按鈕后背景顏色的變化：

<!DOCTYPE html>
<html>
<head>
  <style>
    #myButton {
      background-color: #f0f0f0;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    #myButton.active {
      background-color: #e0e0e0;
    }
  </style>
</head>
<body>
  <button id="myButton">點擊我</button>
  <script>
    document.getElementById('myButton').addEventListener('click', function() {
      // 添加active類來顯示不同的樣式
      this.classList.add('active');
    });
  </script>
</body>
</html>

樣式變化效果

在這個示例中，當用戶點擊按鈕時，按鈕的背景顏色會變?yōu)闇\灰色（#e0e0e0），以顯示被點擊的狀態(tài)，這種樣式變化可以通過CSS的active類來實現。

本文地址： http://canthisbe.com/css/89094.html