如何根據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的背景顏色？

回答

相關問題