随机CSS文件匹配对应文本显示问题求助

最优方案：直接在PHP层面关联主题名称（最可靠） #

因为随机CSS的选择是由PHP生成的，直接在后端把随机数和对应主题名绑定，完全避免前端判断的各种问题：

1. 先定义CSS文件与主题名的对应关系：

<?php
// 按你的1-7号CSS文件，对应填写主题名称
$themeMap = [
    1 => 'Copenhagen',
    2 => 'Paris',
    3 => '主题3名称',
    4 => '主题4名称',
    5 => '主题5名称',
    6 => '主题6名称',
    7 => '主题7名称'
];

// 生成随机ID并获取当前主题名
$randomCssId = mt_rand(1, 7);
$currentTheme = $themeMap[$randomCssId];
?>

2. 输出CSS链接和对应文本：

<link rel="stylesheet" href="/css/<?php echo $randomCssId; ?>.css" />
<!-- 直接显示对应主题文本 -->
<p>此样式表名为<?php echo $currentTheme; ?></p>

如果你需要用JS动态处理 #

可以把PHP生成的主题名传递给JS，再用JS渲染：

1. 在PHP中注入全局变量：

<script>
// 把后端的主题名传给前端JS
window.currentTheme = "<?php echo $currentTheme; ?>";
</script>

2. 用JS在DOM加载完成后更新内容：

// 确保DOM元素加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 找个容器显示文本，比如你页面里的某个元素
    const themeTextEl = document.createElement('p');
    themeTextEl.textContent = '此样式表名为' + window.currentTheme;
    document.body.appendChild(themeTextEl);
});

为什么你原来的代码失效？ #

• 执行时机问题：你的JS代码可能在.skills-title元素或CSS还没加载完成时就运行了，导致获取不到正确的背景色。
• document.write的坑：如果在页面加载完成后调用document.write，会直接清空整个页面，自然看不到输出。
• 样式判断不可靠：不同浏览器对background-color的返回格式可能不一致（比如有的返回十六进制，有的返回RGB），且CSS加载有延迟，容易获取错误值。

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