如何更改没有 ID 的类 css 的属性？答案

【问题标题】：How to change the properties of a class css without ID?如何更改没有 ID 的类 css 的属性？
【发布时间】：2012-05-29 16:33:15
【问题描述】：

我正在制作一个属性可以改变的用户控件

我有一个 HTML (.aspx)：

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

（我的第一个li是假的，另一个是动态添加的，想确保至少有一个引用css类）

我的代码隐藏：

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>";
    }
}

我的 CSS (.css)

.myStyle
{
    /*empty*/
}

如何在不使用 ID 代码的情况下添加样式属性？（因为它是生成的 dinicamente）例如：

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

为所有生成的动态更改 li css 属性

我没有兴趣用 javascript 或 jquery 来解决它

非常感谢

【问题讨论】：

您想要 (a) 动态更改样式，(b) 仅更改一个元素的样式，(c) 更改一个元素的样式的特定属性吗？
我想用 css 类（“myStyle”）改变元素，因为我正在制作一个带有可以改变属性的用户控件
那么为什么更改 CSS 文件本身对您不起作用？
我不想更改 css 文件，我包含 li 元素的属性，动态指定所有背景、边框……
内联渲染样式？（在我的答案中添加了示例）。

标签： c# asp.net .net css

【解决方案1】：

使用“class”属性和 CSS 是设置元素样式的好方法。目前尚不清楚你试图“动态”做什么，但也许仅仅改变你的 CSS 就足够了（如果唯一的原因是提到 CSS 的类，你并不真的需要不可见的元素）：

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

如果你想单独设置它们的样式，你可以直接在 HTML 中内联：

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

注意：如果你构建控件树而不是使用 InnerHtml 属性会更容易。至少不要指定runat='server'，因为在使用 InnerHtml 属性时它没有任何值。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我的问题的两个答案：

正如用户 Alexei Levenkov 所说，生成通用 HTML 控件 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());
    }
}

然后我可以通过他的属性手动访问他们的样式

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();
        }
    }
}

要动态使用悬停添加一种标签样式

<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>

我很高兴！

【讨论】：