如何根据asp.net标签值更改div的背景颜色？

-2

我有一个asp.net标签（lblFriday）和一个div旁边。 lblFriday显示从数据库表中检索的数字数据。如果lblFriday的文本是负数，我希望lblFriday旁边的div显示一个红色三角形，如果lblFriday的文本是正数，则显示绿色三角形。如何根据asp.net标签值更改div的背景颜色？

目前我已经用红色手动设置了div的css类。下面是代码，

HTML/ASPX：

<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label> 
<div class="arrow-down"></div>

CSS：

.arrow-down 
{ 
    float:right; 
    width: 0; 
    margin-top:5px; 
    height: 0; 
    text-align:left; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 10px solid red; 
}

任何想法会有所帮助。

谢谢。

来源

2014-11-21 Arpita

asp.net标签在哪里？ – ekad 2014-11-21 16:39:26

您能否详细说明您的意思是否定的或正面的价值？这些数字？是否有提交按钮被解雇以显示这种负面或正面的价值？我认为需要更多信息才能帮助你。 – 2014-11-21 16:44:29

我在数据库中有一些数字。我的要求是根据数量增加/减少的百分比显示绿色/红色三角形，就像股市一样。 – Arpita 2014-11-21 16:56:23

您需要做的第一件事是将id和runat="server"属性添加到div，以便它可以从后面的代码访问。

<asp:Label ID="lblFriday" runat="server" CssClass="label_target"></asp:Label> 
<div id="divTriangle" runat="server"></div>

那么你需要修复你的CSS如下，其中arrow-down会显示一个红色三角形朝下arrow-up会显示一个绿色的三角形朝上

.arrow-down 
{ 
    float:right; 
    width: 0; 
    margin-top:5px; 
    height: 0; 
    text-align:left; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 10px solid red; 
} 

.arrow-up 
{ 
    float:right; 
    width: 0; 
    margin-top:5px; 
    height: 0; 
    text-align:left; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 10px solid green; 
}

然后设置CSS类的divTriangle在您的代码落后于基于lblFriday.Text的值。假设值是从数据库中检索一个小数，这里是你的代码背后应该是什么样子：

decimal stockValue = ....; // get the value from database 
lblFriday.Text = stockValue.ToString(); 
if (stockValue > 0) 
{ 
    // set css class to arrow-up 
    divTriangle.Attributes["class"] = "arrow-up"; 
} 
else if (stockValue < 0) 
{ 
    // set css class to arrow-down 
    divTriangle.Attributes["class"] = "arrow-down"; 
} 
else 
{ 
    // no css class if stockValue is zero 
    divTriangle.Attributes["class"] = ""; 
}

来源

2014-11-21 17:06:29 ekad

取决于你如何将数据绑定到标签，你可以这样做：

<asp:Label ID="lblFriday" runat="sever" Text='<%# Eval("DATA") %>' 
    OnPreRender="lblFriday_PreRender" CssClass="label_target" />

然后在后面的代码：

protected void lblFriday_PreRender(object sender, EventArgs e) 
{ 
    Label lblFriday = sender as Label; 
    decimal d; 
    if(Decimal.TryParse(lblFriday.Text, out d)) 
    { 
     lblFriday.CssClass += d < 0 ? " negative" : d > 0 ? " positive" : String.Empty; 
    } 
}

，并完成了一些CSS：

.label_target.negative::after 
{ 
    content: '\25BC'; 
    color: Red; 
} 
.label_target.positive::after 
{ 
    content: '\25B2'; 
    color: Green; 
}

来源

2014-11-21 17:34:51 glboothby

如何根据asp.net标签值更改div的背景颜色？

回答

相关问题