动态改变 HTML答案

【问题标题】：Dynamically Changing HTML动态改变 HTML
【发布时间】：2010-02-16 07:22:54
【问题描述】：

我正在尝试创建一个 HTML 页面，其中“正文”颜色会根据从 RAM 中收集的一些数据而变化。如果 RAM 填满超过某个阈值，那么我希望改变颜色。

    <body style="background-color:<%=
    if(MemoryPercentage < 33)
    {
        //set to green.
    }
    else if(MemoryPercentage < 66)
    {
        //set to yellow.
    }
    else
    {
            //set to red.
    }%>">

感谢您的帮助，

亚伦

【问题讨论】：

标签： c# html

【解决方案1】：

<body 
    style="background-color:<%= MemoryPercentage < 33? "green":
        (MemoryPercentage < 66? "yellow":"red") %>;">

【讨论】：

谢谢！作为对这整个混乱的新手，这个答案对我来说并不明显。

【解决方案2】：

我更喜欢使用 CSS 类并将逻辑分离出来，使其更具可读性。

<style type="text/css">
.warn {
   background-color: #00ffff;
}
.error {
   background-color: #ff0000;
}
.ok {
   background-color: #00ff00;
}
</style>

<%
    var klass = MemoryPercentage < 33 : "ok" ? (MemoryPercentage < 66 ? "warn" : "error");
%>

<body class="<%= klass %>">

【讨论】：

感谢您的回答。我从上面的答案开始，但后来修改了我的代码以反映您的额外 CSS 提示。 ;)

【解决方案3】：

虽然您绝对可以使用 body 标记的 sytle 属性直接应用样式（如 this answer 中所建议的那样），但围绕 HTML 的一般最佳实践不鼓励这样做。

您应该将这些样式放在页面上引用的样式表中，然后为这些类指定不同的名称。

然后，在您的代码中，根据您的逻辑将具有所需样式的 class 应用到 body 元素的 class 属性。

【讨论】：

【解决方案4】：

除了其他答案之外：

<body id="Body" runat="server"> 将使Page_Load() 和朋友可以以HtmlGenericControl 访问标签，因此您可以处理逻辑并设置Body.CssClass 而无需模板-y 标记。让它不那么凌乱/更容易维护。

【讨论】：