JavaScript script 標籤深度解析：浮動切換邏輯與 CSS float 應用

自學前端時常遇到 <script> 區塊邏輯難以理解，特別是涉及 DOM 操作與 CSS 樣式動態切換的程式碼。本文以一個典型的「三按鈕控制元素浮動」案例，拆解 script 運作機制。

案例情境

頁面有三個按鈕，文字分別為 left、right、none。點擊按鈕時，將目標元素（通常是偽類或特定 class 元素）的 CSS float 屬性設為對應值，實現版面動態切換。

核心邏輯拆解

// 取得三個按鈕
const btns = document.querySelectorAll('.float-btn');
// 目標元素
const target = document.querySelector('.target-element');

btns.forEach(btn => {
  btn.addEventListener('click', () => {
    const floatVal = btn.textContent.trim().toLowerCase(); // 'left' | 'right' | 'none'
    target.style.cssFloat = floatVal; // 標準屬性
    target.style.styleFloat = floatVal; // IE 相容
  });
});

關鍵知識點

• cssFloat 是 W3C 標準屬性名（JavaScript 中駝峰寫法），對應 CSS float。
• 舊版 IE 使用 styleFloat，雙重寫入確保相容。
• 按鈕文字直接映射浮動值，避免硬編碼，擴充性佳。

延伸學習資源

• W3School CSS float 參考
• 現代佈局中 float 的定位

理解 script 操作 DOM 樣式的核心：選取元素 → 綁定事件 → 修改 style 物件屬性。多練習將 CSS 屬性名轉為駝峰命名（如 background-color → backgroundColor），即可輕鬆掌握動態樣式控制。