如何动态更改css样式答案

【问题标题】：How to change the css styles dynamically如何动态更改css样式
【发布时间】：2017-06-23 07:27:31
【问题描述】：

我正在尝试将转发器的 css 样式更改为不同状态下的不同颜色。预期的输出是打印 6 种不同的状态，例如：进行中、完成、撤回等。目前它只有一种颜色，所以它只显示一种颜色。这里具有挑战性的部分是根据状态动态更改颜色。我该如何做到这一点？目前它基于下面的“status noAction text-center”类提取样式。我应该对后面的代码进行任何更改，还是只是前端 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();
}

【问题讨论】：

标签： c# html css asp.net web-frontend

【解决方案1】：

我认为您想要做的是更改您的 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>
    <% } %>

【讨论】：

【解决方案2】：

如果您的表中有任何列从中转发器获取数据源，那么这将很容易做到类似的东西

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

【讨论】：