JS/CSS/HTML 入門實作：按鈕切換頁面文字樣式

需求分析

新手常見練習：頁面上有一段文字，提供兩個按鈕（或單一切換按鈕），點擊後在「小字紅色」與「大字藍色」兩種樣式間切換。核心知識點：DOM 選取、事件綁定、Class 切換、CSS 類別定義。

完整可執行範例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樣式切換示範</title>
<style>
  /* 定義兩組樣式類別 */
  .font-small { font-size: 12px; color: red; }
  .font-large { font-size: 72px; color: blue; }
  /* 預設樣式 */
  #demo-text { font-size: 16px; color: #333; }
</style>
</head>
<body>
  <button id="btn-toggle">切換樣式</button>
  <p id="demo-text">這裡是測試文字。</p>

  <script>
  // 等待 DOM 就緒
  document.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('btn-toggle');
    const text = document.getElementById('demo-text');
    
    btn.addEventListener('click', function() {
      // 判斷目前類別並切換
      if (text.classList.contains('font-small')) {
        text.classList.replace('font-small', 'font-large');
      } else if (text.classList.contains('font-large')) {
        text.classList.replace('font-large', 'font-small');
      } else {
        // 初始狀態無類別，預設套用小字
        text.classList.add('font-small');
      }
    });
  });
  </script>
</body>
</html>

關鍵技術點解析

原答案代碼改進說明

原答案使用 jQuery 舊版寫法 ($(document).ready, attr('class'), 手動字串比對)，存在以下問題：

• 依賴 jQuery 增加載入體積，現代瀏覽器原生 API 已足夠。
• attr('class') 取得的是字串，多類別時比對極易出錯；classList 為陣列化介面，操作更直觀。
• 邏輯分支冗長，可用 toggle 或 replace 簡化。

進階延伸

• 使用 localStorage 記住使用者偏好，重新整理保持樣式。
• 改用 CSS Custom Properties (變數) 動態調整數值，而非切換類別。
• 加入 CSS Transition 實現平滑變大/變小動畫。

這個小練習雖簡單，但涵蓋了前端開發最核心的「狀態驅動視圖」思想：資料(類別)改變 → 瀏覽器自動重繪，是 React/Vue 等現代框架的基礎雛形。