如何根据数据库返回值为指定DIV设置样式？

方案一：PHP 直接生成样式（最稳妥） #

既然内容是PHP动态渲染的，直接在输出tags2元素时根据status值加内联样式，不用依赖JS，彻底避免加载时机或者选择器的问题。

修改tags2的输出代码：

<div class="tags2" <?php 
    $status = trim($row["status"]);
    if ($status === "Retired") {
        echo 'style="background-color: red;"';
    } elseif ($status === "Active") {
        echo 'style="background-color: green;"';
    }
?>>
    <?php echo $row["status"]; ?>
</div>

注意：必须删掉重复的id="tags2"，循环生成的元素id不能重复，这是之前JS失效的关键原因之一。

方案二：用CSS类维护（更易扩展） #

先在页面的<style>标签或外部CSS文件里定义类：

.status-retired { background-color: red; }
.status-active { background-color: green; }

然后在PHP里根据status给元素加对应的类：

<div class="tags2 <?php 
    $status = trim($row["status"]);
    if ($status === "Retired") {
        echo 'status-retired';
    } elseif ($status === "Active") {
        echo 'status-active';
    }
?>">
    <?php echo $row["status"]; ?>
</div>

同样要删掉重复的id="tags2"。

方案三：修复JavaScript代码（如果非要用JS） #

之前JS不生效大概率是两个问题：DOM还没加载完就执行了代码，或者重复的id导致选择器出错。修复后的JS要放在</body>标签前：

document.addEventListener('DOMContentLoaded', function() {
    // 选所有class为tags2的元素
    const tags = document.querySelectorAll('.tags2');
    tags.forEach(tag => {
        const status = tag.textContent.trim();
        if (status === 'Retired') {
            tag.style.backgroundColor = 'red';
        } else if (status === 'Active') {
            tag.style.backgroundColor = 'green';
        }
    });
});

记得把所有id="tags2"删掉，只留class="tags2"。

另外提一句：你的HTML结构里<tr>和<td>的闭合顺序错了，应该先关</td>再关</tr>，修正后避免DOM结构混乱：

<?php 
echo '<tr>';
echo '<td>';
?>
<!-- 卡片内容 -->
<?php       
echo '</td>';
echo '</tr>';
?>

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