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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/120766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 19:58:13  来源:igfitidea点击:

How to change CSS class of a HTML page element using ASP.NET?

asp.netcssdynamic-css

提问by Alexander Prokofyev

I have several <li> elements with different id's on ASP.NET page:

我在 ASP.NET 页面上有几个具有不同 id 的 <li> 元素:

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

and can change their class using JavaScript like this:

并且可以使用 JavaScript 更改它们的类,如下所示:

li1.className="class2"

But is there a way to change <li> element class using ASP.NET? It could be something like:

但是有没有办法使用 ASP.NET 更改 <li> 元素类?它可能是这样的:

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

But FindControl() doesn't work as I expected. Any suggestions?

但是 FindControl() 没有按我预期的那样工作。有什么建议?

Thanks in advance!

提前致谢!

采纳答案by Richard Yorkshire

The FindControl method searches for server controls. That is, it looks for controls with the attribute "runat" set to "server", as in:

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

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

Because your <li> tags are not server controls, FindControl cannot find them. You can add the "runat" attribute to these controls or use ClientScript.RegisterStartupScript to include some client side script to manipulate the class, e.g.

因为您的 <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());

回答by user49845

Add runat="server"in your HTML page

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

then use the attribute property in your asp.Net page like this

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

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

回答by naspinski

FindControl will work if you include runat="server" in the <li>

如果您在 <li> 中包含 runat="server",FindControl 将起作用

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

Otherwise you server side code can't 'see' it.

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

回答by cweston

This will find the li element and set a CSS class on it.

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

using System.Web.UI.HtmlControls;

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

Remember to add your runat="server"attribute as mentioned by others.

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

回答by stefano m

you must set runat="server" like:

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

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

回答by Vimal Patel

Please try this if you want to apply style:

如果您想应用样式,请尝试此操作:

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

For CSS, you can try below syntax :

对于 CSS,您可以尝试以下语法:

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

回答by Amareswar sai Mulumudi

Leaf Dev provided the solution for this, but in the place of "ctl" you need to insert "Master".

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

It's working for me anyway:

无论如何它对我有用:

using System.Web.UI.HtmlControls;

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

回答by ebram khalil

You also can try this too if u want to add some few styles:

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

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