如何使用CSSStyleSheet.insertRule()修改:root伪类的CSS变量属性

DevOps 小满

2026-9-23

核心实现逻辑

你原有写法是给根元素设置行内CSS变量，仅对当前页面生效，页面刷新/跳转后会失效。搭配CSSStyleSheet.insertRule()+本地存储即可实现全站共用样式表下的持久生效，解决跳转后hash丢失的问题。

完整实现代码

// 优先读取当前URL的hash，无hash则读取本地存储的历史配置
const targetColor = window.location.hash || localStorage.getItem('siteMainBgColor')

if (targetColor) {
  // 把颜色值存入本地存储，跨页面跳转后仍可读取
  localStorage.setItem('siteMainBgColor', targetColor)

  // 方式1：插入到你全站共用的外联样式表，索引对应你公共样式表的位置，默认第一个外联样式表索引为0
  const commonStyleSheet = document.styleSheets[0]
  // 第二个参数为插入位置，0代表插入到样式表最顶部，后续同权重规则可覆盖它
  commonStyleSheet.insertRule(`:root { --main-bg-color: ${targetColor} }`, 0)

  // 方式2：如果公共样式表跨域无法操作，可手动新建样式标签插入规则
  // const customStyle = document.createElement('style')
  // document.head.appendChild(customStyle)
  // customStyle.sheet.insertRule(`:root { --main-bg-color: ${targetColor} }`, 0)
}

后续更新颜色的方法

需要动态修改背景色时调用下面的方法即可，会自动更新规则和本地存储：

function updateMainBgColor(newColor) {
  localStorage.setItem('siteMainBgColor', newColor)
  const commonStyleSheet = document.styleSheets[0]
  // 先删除之前插入的旧规则，避免规则重复
  commonStyleSheet.deleteRule(0)
  // 插入新的颜色规则
  commonStyleSheet.insertRule(`:root { --main-bg-color: ${newColor} }`, 0)
}