使用ASP.NET直接控制CSS樣式
阿新 • • 發佈：2019-02-06
使用JavaScript控制CSS樣式有點麻煩，還是覺得直接使用C#操作更方便快捷，本文通過兩個Button控制TextBox1的高度和背景色，以展示通過C#控制CSS樣式的方法。以下是操作的例項： 一、前端程式碼（TestEditStyle.aspx.）如下： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestEditStyle.aspx.cs" Inherits="Test_TestEditStyle" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無標題頁</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="Button" onclick="Button2_Click" /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div> </form> </body> </html> 二、後臺程式碼（TestEditStyle.aspx.cs）如下： using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; public partial class Test_TestEditStyle : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { TextBox1.Style["background-color"] = "blue"; //背景設為藍色 TextBox1.Style["height"] = "200px"; //高度設為200 } protected void Button2_Click(object sender, EventArgs e) { TextBox1.Style["background-color"] = "red"; //背景設為紅色 TextBox1.Style["height"] = "100px"; //高度設為100 } } 三、補充說明： 只要在標籤里加上runat ="server"和ID="MyTag"，就可在後臺程式碼中直接通過設定MyTag.Style的值來控制樣式。 例如： 在前端加入： <div id="mydiv" runat="server"></div> 後臺即可以直引用mydiv這個對像進行控制： mydiv.Style["width"] = "100px"; mydiv.Style["height"] = "100px"; mydiv.Style["background-color"] = "yellow"; （以上程式碼在VS2008上除錯通過）