如何通过PHP读取数据库值动态修改CSS中<hr>标签的宽度？

没问题，我来帮你一步步完成这个需求！核心思路是通过style.php动态生成CSS规则，把从goals表（包含id和goal_1字段）获取的值作为<hr>的宽度。

1. 编写style.php文件 #

这个文件需要完成三个核心任务：连接数据库、查询目标值、输出带动态值的CSS。我推荐用PDO来操作数据库，安全性和稳定性更好。

示例代码 #

<?php
// 告诉浏览器这是CSS类型的内容，必须加这一行
header("Content-Type: text/css");

// 替换成你自己的数据库配置
$dbHost = 'localhost';
$dbName = 'your_database'; // 如果你说的"名为order的goals表"是指goals表在order数据库里，这里填order
$dbUser = 'your_db_username';
$dbPass = 'your_db_password';

try {
    // 建立数据库连接
    $pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4", $dbUser, $dbPass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 查询指定id的goal_1值（这里假设你要取id=1的记录，可根据需求修改条件）
    $stmt = $pdo->prepare("SELECT goal_1 FROM goals WHERE id = :id");
    $stmt->execute(['id' => 1]);
    $data = $stmt->fetch(PDO::FETCH_ASSOC);

    // 处理结果：有值就用数据库的数，没查到就设默认2px
    $hrWidth = $data ? $data['goal_1'] . 'px' : '2px';

} catch(PDOException $e) {
    // 数据库出错时用默认宽度，同时记录错误日志方便排查
    $hrWidth = '2px';
    error_log("DB Error: " . $e->getMessage());
}

// 输出动态CSS规则
?>
hr {
    width: <?php echo $hrWidth; ?>;
    /* 可以额外加一些默认样式，比如高度、颜色 */
    height: 1px;
    background-color: #ddd;
    border: none;
    margin: 1rem 0;
}

关键提示 #

• 必须设置header("Content-Type: text/css")，否则浏览器会把这个文件当成普通PHP解析，无法识别为CSS。
• 如果需要根据不同场景查询不同的id，可以通过URL参数传递，比如style.php?id=3，然后用$_GET['id']获取（记得做参数过滤，防止SQL注入）。

2. 在前端页面引入动态CSS #

把你HTML页面里的静态CSS引用，替换成这个动态的style.php：

<link rel="stylesheet" href="style.php">

这样每次页面加载时，浏览器都会请求style.php，PHP会从数据库拉取最新的goal_1值，生成对应的CSS规则，<hr>的宽度就会自动跟着数据库的值变化了。

3. 测试与调试 #

• 直接访问style.php的URL，查看输出的CSS内容是否符合预期：比如数据库里goal_1是5，就应该输出hr { width: 5px; ... }。
• 如果数据库连接或查询出错，页面会自动用默认的2px宽度，错误信息会存在服务器的错误日志里，方便你排查问题。

内容的提问来源于stack exchange，提问作者gohar