Question

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

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

感谢您的帮助，

亚伦

Answer 1

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

Answer 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 %>">

Answer 3

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

你应该做的是将这些样式放在页面上引用的样式表中，然后为这些类命名。

然后，在您的代码中，根据您的逻辑将具有您想要的样式的类应用于body元素的class属性。

Answer 4

暂且不谈其他答案：

<body id="Body" runat="server">会使Page_Load()＆amp;朋友作为HtmlGenericControl，因此您可以处理逻辑并设置Body.CssClass而不使用模板-y标记。使它变得不那么混乱/更容易维护。

动态更改HTML

4 个答案: