如何使用 ASP.NET 更改 HTML 页面元素的 CSS 类？

Posted 2023-03-06

【中文标题】如何使用 ASP.NET 更改 HTML 页面元素的 CSS 类？

【英文标题】：How to change CSS class of a HTML page element using ASP.NET?

【发布时间】：2010-09-12 08:31:54

【问题描述】：

我在 ASP.NET 页面上有几个具有不同 id 的

元素：

<li id="li1" class="class1">
<li id="li2" class="class1">
<li id="li3" class="class1">

并且可以像这样使用 javascript 更改他们的类：

li1.className="class2"

但是有没有办法使用 ASP.NET 更改

元素类？可能是这样的：

WebControl control = (WebControl)FindControl("li1");
control.CssClass="class2";

但是 FindControl() 并没有像我预期的那样工作。有什么建议吗？

提前致谢！

【参考方案1】：

你必须像这样设置 runat="server"：

<li id="li1" runat="server">stuff</li>

【参考方案2】：

如果你想应用样式，请试试这个：

li1.Style.Add("background-color", "black");

对于 CSS，您可以尝试以下语法：

li1.Attributes.Add("class", "clsItem");

【参考方案3】：

Leaf Dev 提供了解决方案，但是在“ctl”的位置，您需要插入“Master”。

无论如何它对我有用：

using System.Web.UI.htmlControls;

HtmlGenericControl liItem = (HtmlGenericControl) ctl.FindControl("liItemID");
liItem.Attributes.Add("class", "someCssClass");

【参考方案4】：

如果你想添加一些样式，你也可以试试这个：

li1.Style.add("color","Blue");
li2.Style.add("text-decoration","line-through");

【参考方案5】：

这将找到 li 元素并在其上设置一个 CSS 类。

using System.Web.UI.HtmlControls;

HtmlGenericControl liItem = (HtmlGenericControl) ctl.FindControl("liItemID");
liItem.Attributes.Add("class", "someCssClass");

记得添加其他人提到的runat="server" 属性。

【参考方案6】：

添加 runat="server" 在您的 HTML 页面中

然后像这样在你的asp.Net页面中使用属性属性

li1.Attributes["Class"] = "class1";
li2.Attributes["Class"] = "class2";

【参考方案7】：

FindControl 方法搜索服务器控件。也就是说，它会查找属性“runat”设置为“server”的控件，如下所示：

<li runat="server ... ></li>

因为你的

标签不是服务器控件，FindControl 找不到它们。您可以将“runat”属性添加到这些控件或使用 ClientScript.RegisterStartupScript 包含一些客户端脚本来操作类，例如

System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<script language=\"javascript\">");
sb.Append("document.getElementById(\"li1\").className=\"newClass\";")
sb.Append("</script>");
ClientScript.RegisterStartupScript(this.GetType(), "MyScript", sb.ToString());

【参考方案8】：

如果您在

中包含 runat="server"，FindControl 将起作用

<li id="li1" runat="server">stuff</li>

否则您的服务器端代码无法“看到”它。

【讨论】：

不要忘记，当您将 runat="server" 添加到 LI 元素时，您需要修改 JavaScript 以使用服务器控件的 ClientID 属性查找元素