Changing DIV color in CSS depending on database results?
I want to change the background color of the DIV depending on some true/false values in the database I'm running. Can this be done in CSS or am I forced to use inline CSS when it comes to this?
One solution I came up with is that I had created several (4-5) classes to be called but the classes all had the same CSS rules except for the color and that just made me think that it was redundant and a waste of space.
I also researched and it seems that you can have PHP variables in CSS. BUT I would like to do it without making a separate .css/.php file to link in the header for several reasons. Is this possible?
Maybe I can explain better with some code. Here is the concept I'm trying to get to and I want to know if I'm able to do it without an external stylesheet?:
<hml>
<head>
div.content {
background-color: <?php echo $LegendColor; ?>;
border-style:solid;
border-width:2px;
border-color: #000;
margin: 10px 0px;
}
</head>
<body>
<?php
/* After some database connection & query*/
while ($row = mysql_fetch_assoc($result2))开发者_JS百科 {
$var1 = $row["db_boolean_var1"];
$var2 = $row["db_boolean_var2"];
$var3 = $row["db_boolean_var3"];
$var4 = $row["db_boolean_var4"];
if($var1 == TRUE){
$LegendColor = "#F00";
}
elseif ($var2 == TRUE){
$LegendColor = "#F0F";
}
elseif($var3 == TRUE){
$LegendColor = "#999";
}
elseif($var4 == TRUE){
$LegendColor = "#0F0" ;
}
else{
$LegendColor = "#FFF";
}
echo "<div class=\"content\">
</br>
</div>";
}
</body>
</html>
Why not do
div.content {
border-style:solid;
border-width:2px;
border-color: #000;
margin: 10px 0px;
}
and then add an additional class to the div depending on the db result, e.g.
<div class="content <?php echo getContentClass($row) ?>"> ... </div>
where getContentClass() is a helper function that translates these boolean values into meaningful CSS classes instead of the concrete color values.
function getContentClass(array $row)
{
return implode(' ', array_intersect_key(
array(
'db_boolean_var1' => 'state1',
'db_boolean_var2' => 'state2',
'db_boolean_var3' => 'state3',
'db_boolean_var4' => 'state4'
),
array_filter($row)
));
}
Then just add those CSS classes to your regular stylesheet, e.g.
div.state1 { background-color: red; color: inherit }
This way, everything is cleanly separated and you dont have to resort to inline styles.
Edit: please note that class names like shown above are not meaningful. Nor are classnames like red or black meaningful because they are presentation related. Try to make them content related, e.g. something like invalid, error, paid, free, active and so on.
You can use many classes for html elements so just the "color" class need to be changed. To do this inline class is the best solution.
<element class="thing red" />
element.thing { general rules }
.red { color:red; }
加载中,请稍侯......
精彩评论