ASP.NET CheckBoxList控件动态修改ListItem选项的字体颜色和背景颜色

如果项目中需要动态修改CheckBoxList控件中ListItem选项的字体颜色和背景颜色，可以使用CheckBoxList下ListItem选项的Attributes.CssStyle.Add(HtmlTextWriterStyle key, string value)方法来动态添加样式。该方法介绍如下：

        // 摘要:
        //     使用指定的 System.Web.UI.HtmlTextWriterStyle 枚举值和相应的值将样式项添加到控件
        // 的 System.Web.UI.CssStyleCollection集合。
        //
        // 参数:
        //   key:
        //     要添加到集合中的 System.Web.UI.HtmlTextWriterStyle 值。
        //
        //   value:
        //     要添加到集合中的样式属性 (Attribute) 的值。
        public void Add(HtmlTextWriterStyle key, string value);

具体前台代码：

    <form id="form1" runat="server">
    <div>
        <asp:CheckBoxList runat="server" ID="chklstFontColor" RepeatDirection="Horizontal" RepeatColumns="4">                 
        <asp:ListItem Value="Red">红色字体</asp:ListItem>
        <asp:ListItem Value="Green">绿色字体</asp:ListItem>
        <asp:ListItem Value="Blue">蓝色字体</asp:ListItem>
        <asp:ListItem Value="Yellow">黄色字体</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    <div>
    <asp:CheckBoxList runat="server" ID="chklstBackgroundColor" RepeatDirection="Horizontal" RepeatColumns="4">                 
        <asp:ListItem Value="Red">红色背景</asp:ListItem>
        <asp:ListItem Value="Green">绿色背景</asp:ListItem>
        <asp:ListItem Value="Blue">蓝色背景</asp:ListItem>
        <asp:ListItem Value="Yellow">黄色背景</asp:ListItem>
        </asp:CheckBoxList>
    </div>    
    </form>

具体后台代码：

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //根据ListItem选项值修改字体颜色
                foreach (ListItem lt in chklstFontColor.Items)
                {                    
                    lt.Attributes.CssStyle.Add(HtmlTextWriterStyle.Color, lt.Value);                     
                }
                //根据ListItem选项值修改背景颜色
                foreach (ListItem lt in chklstBackgroundColor.Items)
                {
                    lt.Attributes.CssStyle.Add(HtmlTextWriterStyle.BackgroundColor, lt.Value);
                }
            }
        }

显示的结果：

从后台代码我们可以看出Attributes.CssStyle.Add方法可以很方便的对ListItem选项进行任意的样式的添加。该方法的第一个参数是HtmlTextWriterStyle枚举值，HtmlTextWriterStyle枚举定义了多样的HTML CSS样式参数，包括内外边距、颜色、字体、宽高设置等样式，可自行根据需求设置样式。下面是HtmlTextWriterStyle枚举的代码：

    // 摘要:
    //     指定可用于 System.Web.UI.HtmlTextWriter 或 System.Web.UI.Html32TextWriter 对象输出流的
    //     HTML 样式。
    public enum HtmlTextWriterStyle
    {
        // 摘要:
        //     指定 HTML backgroundcolor 样式。
        BackgroundColor = 0,
        //
        // 摘要:
        //     指定 HTML backgroundimage 样式。
        BackgroundImage = 1,
        //
        // 摘要:
        //     指定 HTML bordercollapse 样式。
        BorderCollapse = 2,
        //
        // 摘要:
        //     指定 HTML bordercolor 样式。
        BorderColor = 3,
        //
        // 摘要:
        //     指定 HTML borderstyle 样式。
        BorderStyle = 4,
        //
        // 摘要:
        //     指定 HTML borderwidth 样式。
        BorderWidth = 5,
        //
        // 摘要:
        //     指定 HTML color 样式。
        Color = 6,
        //
        // 摘要:
        //     指定 HTML fontfamily 样式。
        FontFamily = 7,
        //
        // 摘要:
        //     指定 HTML fontsize 样式。
        FontSize = 8,
        //
        // 摘要:
        //     指定 HTML fontstyle 样式。
        FontStyle = 9,
        //
        // 摘要:
        //     指定 HTML fontheight 样式。
        FontWeight = 10,
        //
        // 摘要:
        //     指定 HTML height 样式。
        Height = 11,
        //
        // 摘要:
        //     指定 HTML textdecoration 样式。
        TextDecoration = 12,
        //
        // 摘要:
        //     指定 HTML width 样式。
        Width = 13,
        //
        // 摘要:
        //     指定 HTML liststyleimage 样式。
        ListStyleImage = 14,
        //
        // 摘要:
        //     指定 HTML liststyletype 样式。
        ListStyleType = 15,
        //
        // 摘要:
        //     指定 HTML cursor 样式。
        Cursor = 16,
        //
        // 摘要:
        //     指定 HTML direction 样式。
        Direction = 17,
        //
        // 摘要:
        //     指定 HTML display 样式。
        Display = 18,
        //
        // 摘要:
        //     指定 HTML filter 样式。
        Filter = 19,
        //
        // 摘要:
        //     指定 HTML fontvariant 样式。
        FontVariant = 20,
        //
        // 摘要:
        //     指定 HTML left 样式。
        Left = 21,
        //
        // 摘要:
        //     指定 HTML margin 样式。
        Margin = 22,
        //
        // 摘要:
        //     指定 HTML marginbottom 样式。
        MarginBottom = 23,
        //
        // 摘要:
        //     指定 HTML marginleft 样式。
        MarginLeft = 24,
        //
        // 摘要:
        //     指定 HTML marginright 样式。
        MarginRight = 25,
        //
        // 摘要:
        //     指定 HTML margintop 样式。
        MarginTop = 26,
        //
        // 摘要:
        //     指定 HTML overflow 样式。
        Overflow = 27,
        //
        // 摘要:
        //     指定 HTML overflowx 样式。
        OverflowX = 28,
        //
        // 摘要:
        //     指定 HTML overflowy 样式。
        OverflowY = 29,
        //
        // 摘要:
        //     指定 HTML padding 样式。
        Padding = 30,
        //
        // 摘要:
        //     指定 HTML paddingbottom 样式。
        PaddingBottom = 31,
        //
        // 摘要:
        //     指定 HTML paddingleft 样式。
        PaddingLeft = 32,
        //
        // 摘要:
        //     指定 HTML paddingright 样式。
        PaddingRight = 33,
        //
        // 摘要:
        //     指定 HTML paddingtop 样式。
        PaddingTop = 34,
        //
        // 摘要:
        //     指定 HTML position 样式。
        Position = 35,
        //
        // 摘要:
        //     指定 HTML textalign 样式。
        TextAlign = 36,
        //
        // 摘要:
        //     指定 HTML verticalalign 样式。
        VerticalAlign = 37,
        //
        // 摘要:
        //     指定 HTML textoverflow 样式。
        TextOverflow = 38,
        //
        // 摘要:
        //     指定 HTML top 样式。
        Top = 39,
        //
        // 摘要:
        //     指定 HTML visibility 样式。
        Visibility = 40,
        //
        // 摘要:
        //     指定 HTML whitespace 样式。
        WhiteSpace = 41,
        //
        // 摘要:
        //     指定 HTML zindex 样式。
        ZIndex = 42,

 

---

---

---