如何動態更改CSS樣式

我試圖將中繼器的CSS樣式更改爲不同狀態下的不同顏色。預期的輸出是打印6種不同的狀態，如：正在進行中，完成，撤回等等。目前它具有單一顏色，因此它只顯示一種顏色。這裏具有挑戰性的部分是根據狀態動態改變顏色。我如何實現這一目標？目前它基於下面的「status noAction text-center」類來拉取樣式。我應該在代碼後面進行任何更改還是僅僅是前端css更改。有人可以給我一個例子，請。如何動態更改CSS樣式

的.aspx代碼：

<div class="row"> 
       <asp:Repeater ID="rptStatuses" runat="server"> 
        <ItemTemplate> 
         <div class="col-md-4 col-sm-4"> 
          <div class="status noAction text-center"> 
           <div class="banner"> 

            <asp:Label runat="server"> <%# Eval("ID") %></asp:Label> 
           </div> 
           <div class="label"><%# Eval("Name") %></div> 
          </div> 
         </div> 
        </ItemTemplate> 
       </asp:Repeater>

的.cs代碼相關部分

private void GB() 
     { 

      var surveyId = 55; 
      var stateLabels = _manageDatasets.GetStateLabels(surveyId); 
      List<Status> statusesList = new List<Status>(); 
      foreach (var sl in stateLabels) 
      { 
       if (sl.Key != -1) 
        statusesList.Add(new Status { ID = sl.Key.ToString(), Name = sl.Value } 
       ); 
      } 
      this.rptStatuses.DataSource = statusesList; 
      this.rptStatuses.DataBind(); 
}

來源

2017-06-22 user3147594

我想你想要做的是改變類在你的HTML，只是使用的嵌入代碼是能夠根據狀態動態更改橫幅顏色等。要嵌入的代碼會是這個樣子 -

<div class="col-md-4 col-sm-4"> 
    <% if(status == "noAction") { %> 
     <div class="status noAction text-center"> 
      <div class="banner"> 

       <asp:Label runat="server"> <%# Eval("ID") %></asp:Label> 
      </div> 
      <div class="label"><%# Eval("Name") %></div> 
     </div> 
    <% } %>

來源

2017-06-22 20:33:06 Trey50Daniel

如果你從哪裏直放站越來越數據源，那麼這將是很容易做到類似的東西

<asp:Repeater ID="rptStatuses" runat="server"> 
       <ItemTemplate> 
        <div class="col-md-4 col-sm-4"> 
         <div class='<%# Convert.toInt32(eval("ActionColumnName"))==1 ? "status In progress text-center" : Convert.toInt32(eval("ActionColumnName"))==2 ? "status complete text-center" : Convert.toInt32(eval("ActionColumnName"))==3 ? "status withdrawn text-center" : "status noAction text-center" '> 
          <div class="banner"> 

           <asp:Label runat="server"> <%# Eval("ID") %></asp:Label> 
          </div> 
          <div class="label"><%# Eval("Name") %></div> 
         </div> 
        </div> 
       </ItemTemplate> 
      </asp:Repeater>

在你表中的任何列

來源

2017-06-22 23:27:31

如何動態更改CSS樣式

回答

相關問題