如何使用JavaScript修改body:before伪元素的content属性值

伪元素:before不属于真实DOM节点，无法直接通过DOM的style属性修改样式，以下是两种可直接落地的实现方式：

方案1：配合CSS自定义属性实现（推荐，维护成本最低） #

先把原有CSS的content属性改为读取CSS自定义属性，后续JS只需要修改对应变量值即可，不需要重复插入样式标签：

body:before{
  /* 定义自定义属性，默认值为空字符串 */
  content: var(--watermark-content, '');
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  
  color: #0d745e;
  font-size: 100px;
  /* 注意：原代码font-weight带px是无效写法，已修正 */
  font-weight: 500;
  display: grid;
  justify-content: center;
  align-content: center;
  opacity: 0.2;
  transform: rotate(-45deg);
}

对应JS设置函数：

/**
 * 设置全局页面水印
 * @param {string} text 水印显示文本
 */
function setWatermark(text) {
  // content属性值要求带引号，这里转义文本内的双引号后包裹一层双引号
  const contentValue = `"${String(text).replace(/"/g, '\\"')}"`;
  document.body.style.setProperty('--watermark-content', contentValue);
}

// 调用示例
setWatermark('内部资料 禁止外传');

方案2：动态插入样式覆盖（无需修改原有CSS） #

如果不想调整已经写好的CSS代码，可以直接通过JS动态插入样式规则，覆盖原有content属性：

function setWatermark(text) {
  // 先清除旧的动态水印样式，避免重复插入
  const oldStyleEl = document.querySelector('#dynamic-watermark');
  if (oldStyleEl) oldStyleEl.remove();

  // 创建样式标签写入覆盖规则
  const styleEl = document.createElement('style');
  styleEl.id = 'dynamic-watermark';
  const safeText = String(text).replace(/"/g, '\\"');
  // 加!important确保优先级高于原有样式
  styleEl.textContent = `body:before { content: "${safeText}" !important; }`;
  document.head.appendChild(styleEl);
}

// 调用示例
setWatermark('机密文档 请勿传播');

注意事项：

• CSS的content属性的字符串值必须用单/双引号包裹，JS拼接规则时一定要记得加引号，同时转义文本本身包含的引号，否则样式会失效。
• 原CSS中font-weight: 500px是非法值，font-weight只接受纯数字、normal/bold这类关键字，不需要加长度单位，修正后粗度效果才能正常显示。

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