如果项目中需要动态修改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,
作者:十有三
出处:https://shiyousan.com/post/635387190685091973
版权声明:本文采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。欢迎转载本文,转载请声明出处或保留此段声明。