C# 後台動態修改前台 DOM 元素 CSS 樣式實戰

核心技巧

在 ASP.NET WebForms 中，為 HTML 元素添加 runat="server" 並設置 id，即可在後台通過 Control.Style 集合動態設置內聯樣式。

前台標記

<div id="div1" runat="server">haha</div>

後台代碼

using System.Web.UI.WebControls; // 必須引入

// 設置顯示模式
div1.Style["display"] = "inline";

// 設置背景圖片
div1.Style["background-image"] = "url(images/bg_active.jpg)";

// 設置多條樣式
div1.Style.Add("color", "red");
div1.Style.Add("font-weight", "bold");

關鍵點

• 雙引號：C# 字符串必須用雙引號，屬性名區分大小寫（如 background-image）。
• Style 集合：實現 IAttributeAccessor，最終渲染為 style="..." 內聯屬性。
• 適用範圍：所有繼承 HtmlControl 或 WebControl 的服務端控件均支持。

現代替代方案

• CSS 類切換：後台操作 CssClass，樣式定義在 .css 文件，結構與表現分離。
• 前端框架：Blazor / React / Vue 通過數據綁定控制 class/style，避免服務端拼接 HTML。

總結

Control.Style 是 WebForms 時代快速動態樣式的利器，但現代開發推薦「類名驅動」模式，提升可維護性與前後端分離度。