web-dev-qa-db-ja.com

ASP.NETを使用してHTMLページ要素のCSSクラスを変更するにはどうすればよいですか？

ASP.NETページに異なるIDを持ついくつかの<li>要素があります。

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

次のようにJavaScriptを使用してクラスを変更できます。

li1.className="class2"

しかし、ASP.NETを使用して<li>要素クラスを変更する方法はありますか？次のようになります。

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

しかし、FindControl（）は期待どおりに機能しません。助言がありますか？

前もって感謝します！

asp.netcssdynamic-css
17
Alexander Prokofyev

FindControlメソッドは、サーバーコントロールを検索します。つまり、次のように、属性「runat」が「server」に設定されたコントロールを探します。

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

<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());
4
Richard Yorkshire

追加 runat="server"HTMLページ内

次に、次のようにasp.Netページの属性プロパティを使用します

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

<li>にrunat = "server"を含めると、FindControlが機能します。

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

そうでない場合、サーバー側のコードはそれを「見る」ことができません。

12
naspinski

これにより、li要素が検索され、CSSクラスが設定されます。

using System.Web.UI.HtmlControls;

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

他の人が言及しているように、runat="server"属性を忘れずに追加してください。

5
cweston

runat = "server"を次のように設定する必要があります。

<li id="li1" runat="server">stuff</li>
4
stefano m

スタイルを適用したい場合は、これを試してください：

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

CSSの場合、以下の構文を試すことができます。

li1.Attributes.Add("class", "clsItem");
3
Vimal Patel

Leaf Devはこれに対するソリューションを提供しましたが、「ctl」の代わりに「Master」を挿入する必要があります。

とにかくそれは私のために働いています：

using System.Web.UI.HtmlControls;

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

いくつかのスタイルを追加したい場合は、これも試すことができます。

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