Question

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

目前，我已使用红色手动设置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;
}

任何想法都会有所帮助。

感谢。

Answer 1

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

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

然后根据divTriangle的值在您的代码中设置lblFriday.Text的CSS类。让我们说这个值是从数据库中检索到的十进制数，这里的代码背后应该是这样的：

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

Answer 2

根据您将数据绑定到标签的方式，您可以执行以下操作：

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

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

2 个答案: