2010-02-15 2 views
0

Я пытаюсь создать страницу HTML, где цвет тела изменяется в зависимости от некоторых данных, собираемых из ОЗУ. Если RAM заполняется выше определенного порога, я хочу, чтобы цвет изменился.Динамическое изменение HTML

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

Спасибо за вашу помощь,

Аарон

ответ

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

Спасибо! Будучи новичком во всем этом беспорядке, этот ответ не был для меня очевидным. –

0

Хотя вы определенно можете применить стиль непосредственно с помощью атрибута SYTLE тега тела (как это было предложено в this answer), вообще лучше практики, вращающиеся вокруг HTML, препятствуют этому.

Что вам нужно сделать, это поместить эти стили в таблицу стилей, на которую ссылаются на вашей странице, и затем иметь разные имена для классов.

Затем в вашем коде примените класс , который имеет желаемый стиль в зависимости от вашей логики с атрибутом класса элемента body.

4

Я бы предпочел использовать классы 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 %>"> 
+0

Спасибо за этот ответ. Я начал с ответа выше, но с тех пор изменил свой код, чтобы отразить ваш дополнительный совет CSS. ;) –

0

Просто в сторону, чтобы другие ответы:

<body id="Body" runat="server"> сделает тег доступным для Page_Load() & друзей как HtmlGenericControl, так что вы можете справиться с логикой и установить Body.CssClass без шаблонов у разметки. Делает его немного менее грязным/легче поддерживать.

Смежные вопросы