CSS本身无运行时计算能力，random()等函数不存在；所谓“随机颜色”实为JS生成确定值后注入CSS变量，变量仅作容器而非生成器。
为什么直接在CSS里写 random() 不行
CSS本身没有运行时计算能力，random() 这类函数根本不存在。所谓“随机颜色”，本质是 JS 在运行时生成一批确定的值，再注入到 CSS 自定义属性中——CSS 变量只是容器，不是生成器。
常见错误是试图这样写：
:root { --tag-color: hsl(random() * 360, 70%, 60%); }这会直接报错或被忽略。浏览器解析 CSS 时不会执行任何 JS 表达式。
用 JS 动态设置多个 --tag-color-N 变量
标签云通常有固定数量（比如 12 个常用标签），没必要每个标签都实时算色。更稳的做法是预生成 N 个差异明显、可读性好的随机色，挂成独立变量：
立即学习“前端免费学习笔记（深入）”；
- 避免重复色：用 HSL 模式控制饱和度和明度，只在色相上做离散采样
- 保证对比度：明度固定在 50%–70%，避免太暗或太亮影响文字可读性
- 注入时机：在
document.documentElement.style.setProperty()中批量设置
示例代码：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
const colors = Array.from({ length: 12 }, (_, i) => {
const hue = (i * 137.5) % 360; // 黄金角近似，减少相邻色相似度
return `hsl(${hue}, 70%, 60%)`;
});
colors.forEach((c, i) => {
document.documentElement.style.setProperty(`--tag-color-${i + 1}`, c);
});HTML 标签如何绑定对应变量
别用 JS 给每个 <span> 写内联 style——那样失去 CSS 变量的复用优势。推荐用数据索引 + 属性选择器：
- 给每个标签加
data-index="1"到data-index="12" - 在 CSS 里用属性选择器映射变量：
[data-index="1"] { color: var(--tag-color-1); } - 如果标签数动态变化，改用
nth-child(3n+1)等伪类轮询，但要注意顺序稳定性
关键点：JS 只负责生成和注入变量，样式逻辑完全留在 CSS 里，便于维护和主题切换。
刷新页面颜色不变？那是缓存了变量值
很多人希望每次刷新都换一套新色，但直接在 JS 初始化里调用 Math.random() 会导致 FOUT（Flash of Unstyled Text）：CSS 还没加载完，JS 就已执行并设值，部分标签可能短暂无色。
更稳妥的方式：
- 把颜色生成逻辑放在
DOMContentLoaded后，或包裹在requestIdleCallback中 - 若需强随机性，可加时间戳扰动：
const seed = Date.now() % 1000;，再基于 seed 算色相 - 注意 SSR 场景：服务端不执行 JS，变量为空，必须在客户端补全，且首屏要 fallback 到默认色
最易被忽略的是：CSS 变量作用域。如果在某个组件内部 style.setProperty，记得目标元素是该组件根节点，而不是 document.documentElement，否则全局污染。
