Question

我想根据我正在运行的数据库中的某些true / false值来更改DIV的背景颜色。这可以在CSS中完成，还是我被迫使用内联CSS？

我提出的一个解决方案是我创建了几个（4-5）类来调用但是这些类除了颜色之外都有相同的CSS规则，这让我认为它是多余的并且浪费太空了。

我也研究过，似乎你可以在CSS中使用PHP变量。但是我想这样做而没有单独的.css / .php文件链接在标题中有几个原因。这可能吗？

也许我可以用一些代码更好地解释。这是我想要达到的概念，我想知道如果没有外部样式表我能做到吗？：

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


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

Answer 1

为什么不

div.content {
    border-style:solid;
    border-width:2px;
    border-color: #000;
    margin: 10px 0px;
}

然后根据db结果向div添加一个额外的类，例如

<div class="content <?php echo getContentClass($row) ?>"> ... </div>

其中getContentClass()是一个辅助函数，它将这些布尔值转换为有意义的CSS类而不是具体的颜色值。

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)
    ));
}

然后将这些CSS类添加到常规样式表中，例如

div.state1 { background-color: red; color: inherit }

这样，一切都干净利落，你不必诉诸内联样式。

修改：请注意，上面显示的类名无意义。红色或黑色的类名也不是有意义的，因为它们与表示相关。尝试使它们与内容相关，例如像无效，错误，付费，免费，活跃等等。

Answer 2

您可以为html元素使用许多类，因此只需要更改“颜色”类。要做到这一点，内联类是最好的解决方案。

<element class="thing red" />

element.thing { general rules }

.red { color:red; }

根据数据库结果更改CSS中的DIV颜色？

2 个答案: