如何更改不带ID的CSS类的属性？

Question

I am making a user control with properties that can change

I have a HTML (.aspx):

<div>
    <ul>
        <li id="li_id" runat="server" class="myStyle" visible="false"></li>
    </ul>
</div>

(My first li is false that the other will be added dynamically and want to make sure there is at least one reference css class)

my codebehind:

for (int i = 0; i < fotos.Count(); i++)
{
    if (File.Exists(Server.MapPath((fotos[i]))))
    {
        content_slider_inside.InnerHtml += @"<li id='img" + i.ToString() + "'><IMG SRC='" + fotos[i] + "' HEIGHT='490PX' /></li>";
        navigation.InnerHtml += "<li class='myStyle' runat='server'><a href='#img" + (i+1).ToString() + "'>" + (i+1).ToString() + "</a></li>";
    }
}

My CSS (.css)

.myStyle
{
    /*empty*/
}

How i add my style properties without using the ID code? (since it is generated dinicamente) for example:

myStyle["background-color"]="red";

for all generated dynamically change li css property

I'm NOT interested to solve it with javascript or jquery

thank you so much

Answer 1

Using "class" attribute and CSS is good way of styling elements. It is not clear what you trying to do "dynamically", but maybe simply changing you CSS is enough (and you don't really need invisible element if the only reason is to mention class for CSS):

.myStyle
{
    background-color:"red";
}

If you want to style them individually you can inline in HTML directly:

navigation.InnerHtml += "<li style='background-color:red;' ...

Note: it would be easier if you build control tree instead of using InnerHtml property. At least don't specify runat='server' since there is no value in it when using InnerHtml property.

Answer 2

您可以使用各种各样的CSS选择器来做到这一点http://www.w3.org/TR/CSS2/selector.html

Answer 3

two answers to my problem:

as mentioned by the user Alexei Levenkov generating generic HTML controls HtmlGenericControl

for (int i = 0; i < fotos.Count(); i++)
{
    if (File.Exists(Server.MapPath((fotos[i]))))
    {
        content_slider_inside.InnerHtml += @"<li id='img" + (i + 1).ToString() + "'><IMG SRC='" + fotos[i] + "' HEIGHT='490PX' /></li>";
        //navigation.InnerHtml += "<li id='item" + (i+1).ToString() + "' runat='server' class='menu_item'><a href='#img" + (i+1).ToString() + "'>" + (i+1).ToString() + "</a></li>";

        HtmlGenericControl a = new HtmlGenericControl("a");
        a.Attributes["href"] = "#img" + (i+1).ToString();
        a.InnerHtml = (i + 1).ToString();

        HtmlGenericControl c = new HtmlGenericControl("li");
        c.ID = "item" + (i+1).ToString();
        c.Attributes["runat"] = "server";
        c.Attributes["class"] = "menu_item";
        c.Controls.Add(a);

        navigation.Controls.Add(c);

        id_imgs.Add("img" + (i+1).ToString());
        id_items.Add("item" + (i+1).ToString());
    }
}

and then I can manually access their styles through his property

foreach(string i in id_items)
{
    HtmlGenericControl liItem = (HtmlGenericControl)navigation.FindControl(i);
    if (liItem != null)
    {
        if (menu_Item_Fondo != null)
            liItem.Style["background-color"] = menu_Item_Fondo;
        if (menu_Item_Hover_Fondo != null)
        {
            StringBuilder style = new StringBuilder();
            style.AppendLine(".navigation li a:hover { ");
            style.AppendLine(String.Format(" color: {0};", menu_Item_Hover_TextColor));
            style.AppendLine(String.Format(" background-color: {0};", menu_Item_Hover_Fondo));
            style.AppendLine("} ");
            style_menu_item.InnerText = style.ToString();
        }
    }
}

To use the hover dynamically add one label style

<div>
    <style id="style_menu_item" runat="server" class="class_style"></style>
    <ul>
        <li id="li_id" runat="server" class="myStyle" visible="false"></li>
    </ul>
</div>

I'm Happy!