根据 SQL 数据库值更改 div 上的 css 值答案

【问题标题】：Change css value on div depending on the SQL database value根据 SQL 数据库值更改 div 上的 css 值
【发布时间】：2021-04-25 04:29:22
【问题描述】：

所以我创建了一个包含 5 个步骤的订单状态页面。所有背景默认为红色。我在 SQl 中有一个表，其中包含在 sql 数据库中更新的 1-5 的数量。当客户在我设置的页面中放置代码时，我希望它登录到数据库检查以查看 sql 数据库中哪个数字处于活动状态，然后用绿色背景覆盖共同发起的 div。

  .SqlActive{
    background-color:green !important;
  }

我也知道我想要它做什么，但我不知道如何开始编码。我知道一点 php 和 SQL。
转到网页输入代码。
基于代码 SQL 抓取行并检查状态列中的数字，并根据 SQl 列 1-5 中的数字将 css 覆盖为绿色。
因此，如果 3 是状态列中的数字，则其余的第 3 个 div 将为绿色会是红色的。
谁能指出我正确的方向或示例代码让我开始？我必须学习 ASP 或 ajax 或类似的吗？

.service1{
z-index: 99; 
background-image: url(../images/);
border: 1px solid yellow;
background-color:#ff0000;
margin:10px;padding:10px;
height:200px;
width:95%;

}

.service2{margin:5px;padding:5px;   z-index: 99; 
background-image: url(../images/);
height:189px;   
width:90%;
border: 1px solid yellow;background-color:#ff0000;
margin:5px;
}

.service3{margin:5px;padding:5px;   
background-image: url(../images/);
height:189px;
width:90%;
border: 1px solid yellow;background-color:#ff0000;
margin:5px;
}

.service4{margin:5px;padding:5px;
    background-image: url(../images/);  
height:189px;
width:90%;
border: 1px solid yellow;background-color:#ff0000;
margin:5px; 
}

.service5{  margin:5px;padding:5px;
background-image: url(../images/);
height:189px;
width:90%;
    border: 1px solid yellow;background-color:#ff0000;
margin:5px;
}

.SqlActive{
    background-color:green !important;
}

$con = mysqli_connect("localhost", "user", "pass", "database");
$sql= 'SELECT * FROM table' ;
$results = mysqli_query($con, $sql) or die("<br>Bad query: $sql");



<div class="service1">
<div class="Spic">pic</div><!---->
<div class="Shead">header</div><!---->
<div class="Scont">content</div><!---->
</div><!--service1-->
<div class="service2">
<div class="Spic">pic</div><!---->
<div class="Shead">header</div><!---->
<div class="Scont">content</div><!---->
</div><!--service2-->
<div class="service3">
<div class="Spic">pic</div><!---->
<div class="Shead">header</div><!---->
<div class="Scont">content</div><!---->
</div><!--service3-->
<div class="service4">
<div class="Spic">pic</div><!---->
<div class="Shead">header</div><!---->
<div class="Scont">content</div><!---->
</div><!--service4-->
<div class="service5">
<div class="Spic">pic</div><!---->
<div class="Shead">header</div><!---->
<div class="Scont">content</div><!---->
</div><!--service5-->

【问题讨论】：

标签： php html css sql

【解决方案1】：

最好的起点是阅读一些 PHP 学习资源，YouTube 等上的不少。

https://wtools.io/php-sandbox/b3p6 - 如果您进入此处，请按“执行”并查看 HTML 选项卡，您可以看到代码的“工作”版本。

请注意 - 重要 - 如果您允许用户输入用作 MySQL 一部分的数据，您需要阅读 SQL 注入以防止人们入侵您的应用程序询问。 Google mysqli 准备好的语句（或者更好的是 PDO，它是 PHP 的一个更好的数据库扩展）。

<html>
    <head>
        <style>
            .service1{
                z-index: 99;
                background-image: url(../images/);
                border: 1px solid yellow;
                background-color:#ff0000;
                margin:10px;
                padding:10px;
                height:200px;
                width:95%;
            }
            .service2{
                margin:5px;
                padding:5px;
                z-index: 99;
                background-image: url(../images/);
                height:189px;
                width:90%;
                border: 1px solid yellow;
                background-color:#ff0000;
                margin:5px;
            }
            .service3{
                margin:5px;
                padding:5px;
                background-image: url(../images/);
                height:189px;
                width:90%;
                border: 1px solid yellow;
                background-color:#ff0000;
                margin:5px;
            }
            .service4{
                margin:5px;
                padding:5px;
                background-image: url(../images/);
                height:189px;
                width:90%;
                border: 1px solid yellow;
                background-color:#ff0000;
                margin:5px;
            }
            .service5{
                margin:5px;
                padding:5px;
                background-image: url(../images/);
                height:189px;
                width:90%;
                border: 1px solid yellow;
                background-color:#ff0000;
                margin:5px;
            }
            .SqlActive{
                background-color:green !important;
            }
        </style>
    </head>
    <body>
        <?php
            $status = $mysqli->query("SELECT name FROM contacts WHERE id = 5")->fetch_object()->status; 

            // $status = 2;
        ?>
        <div class="service1 <?php echo $status >= 1 ? 'SqlActive' : ''  ?>">
            <div class="Spic">
                pic
            </div>
            <!---->
            <div class="Shead">
                header
            </div>
            <!---->
            <div class="Scont">
                content
            </div>
            <!---->
        </div>
        <!--service1-->
        <div class="service2 <?php echo $status >= 2 ? 'SqlActive' : ''  ?>">
            <div class="Spic">
                pic
            </div>
            <!---->
            <div class="Shead">
                header
            </div>
            <!---->
            <div class="Scont">
                content
            </div>
            <!---->
        </div>
        <!--service2-->
        <div class="service3 <?php echo $status >= 3 ? 'SqlActive' : ''  ?>">
            <div class="Spic">
                pic
            </div>
            <!---->
            <div class="Shead">
                header
            </div>
            <!---->
            <div class="Scont">
                content
            </div>
            <!---->
        </div>
        <!--service3-->
        <div class="service4 <?php echo $status >= 4 ? 'SqlActive' : ''  ?>">
            <div class="Spic">
                pic
            </div>
            <!---->
            <div class="Shead">
                header
            </div>
            <!---->
            <div class="Scont">
                content
            </div>
            <!---->
        </div>
        <!--service4-->
        <div class="service5 <?php echo $status >= 5 ? 'SqlActive' : ''  ?>">
            <div class="Spic">
                pic
            </div>
            <!---->
            <div class="Shead">
                header
            </div>
            <!---->
            <div class="Scont">
                content
            </div>
            <!---->
        </div>
        <!--service5-->
    </body>
</html>

【讨论】：