jQuery 開關燈切換失效？IE 下 toggleClass 不觸發重繪的修復方案

使用 jQuery toggleClass 切換 body 背景色實現「開關燈」效果，Chrome/Firefox 正常，IE 下點擊一次變黑，再點無反應。原因在於 IE 不會因 className 變更自動觸發背景重繪。

問題程式碼

<script>
$(function () {
    $("#kgd").click(function () {
        $(document.body).toggleClass("night");  // IE 下不生效
    });
});
</script>
<style>
.night { background-color: black; }
</style>
<input id="kgd" type="button" value="開關燈" />

根本原因

IE (含 IE11) 的渲染引擎在 className 變更後，若樣式屬性為 background-color 且元素為 body，有時不會自動重繪。需強制觸發佈局/重繪。

解決方案

1. 直接操作 style 屬性（推薦，跨瀏覽器穩定）：

   $("#kgd").click(function () {
       var $body = $(document.body);
       $body.toggleClass("night");
       // 強制同步 style，觸發重繪
       $body.css("background-color", $body.hasClass("night") ? "black" : "white");
   });
   

2. 觸發 reflow（讀取 offsetWidth）：

   $("#kgd").click(function () {
       var body = document.body;
       body.classList.toggle("night");
       void body.offsetWidth;  // 強制 reflow
   });
   

3. 使用 CSS 變數 (Custom Properties) 現代寫法：

   :root { --bg: white; }
   body { background-color: var(--bg); }
   .night { --bg: black; }
   
   // JS
   $("#kgd").click(() => document.body.classList.toggle("night"));
   

   CSS 變數變更會自動觸發重繪，IE 不支援，需 Polyfill。

最佳實務建議

• 避免直接操作 body 背景，改用全屏覆蓋層 <div id="overlay"> 切換 display: none/block，相容性最佳。
• 專案若需支援 IE，請在 CSS Reset 中加入 body { background-color: white; } 確保初始值明確。
• 使用 classList.toggle 原生 API 替代 jQuery，減少依賴、效能更好。

驗證步驟

1. 在 IE 開發者工具 (F12) 切換到 Emulation 模式測試。
2. 檢查 body 的 className 是否正確切換。
3. 檢查 Computed Styles 中 background-color 是否更新。

加上強制同步 style.backgroundColor 一行，即可解決 IE 下開關燈失效問題，且不影響現代瀏覽器體驗。