JS获取与设置CSS伪元素(：：before/：：after)样式的方法

系统架构图：JavaScript 运行环境、CSSOM 计算总线与宿主伪元素渲染盒交互全景

一、伪元素的底层机制与 JS 访问边界

初学者尝试操作伪元素时，最容易写出的代码是类似 document.querySelector('.card::before') 或者 element.style.before.color = 'red'。这两种写法都会失败，前者会抛出 DOMException 语法解析错误或直接返回 null，后者则直接报错未定义属性。

要理解这种限制，必须认清浏览器渲染流程中的 DOM 树与 CSSOM 渲染树 的界限：

• DOM 树（文档对象模型）：由 HTML 解析器生成，每一个标签（如 <div>、<span>）都会被实例化为一个真实的内存对象（Element 节点）。DOM API 仅对该树内的物理节点开放增删查改能力。
• CSSOM 与渲染树（样式与排版模型）：CSS 规则中的 ::before 与 ::after 属于生成内容（Generated Content）。当宿主元素匹配到包含伪元素的规则且声明了有效的 content 时，排版引擎会在布局阶段为宿主元素挂载对应的 RenderBox。这一结构纯属排版视觉层的产物，浏览器并没有为其创建独立的 DOM 节点实例。

图 1：DOM 树与 CSSOM 渲染树的结构分界与 JS 访问通道

由于伪元素只存在于右侧的渲染计算树中，因此操作伪元素必须遵循严格的边界规则：读取时只能直接向 CSSOM 请求只读计算结果；写入时则必须通过宿主元素上的 CSS 级联属性或全局样式规则间接作用。

二、使用 window.getComputedStyle() 精确读取伪元素样式

W3C 规范为 window.getComputedStyle() 方法提供了第二个可选参数 pseudoElt，专门用于向浏览器查询指定伪元素的最终渲染计算样式。

1. 核心语法与参数说明

const styleDeclaration = window.getComputedStyle(element[, pseudoElt]);

• element：宿主 DOM 元素节点。伪元素依赖其挂载，因此必须传入宿主。
• pseudoElt：伪元素选择器字符串。推荐使用标准规范的双冒号形式 '::before' 或 '::after'，早期兼容写法单冒号 ':before'、':after' 也受现代浏览器支持。
• 返回值：一个只读的 CSSStyleDeclaration 实例，包含了该伪元素应用全部 CSS 级联规则并完成尺寸与继承计算后的最终属性值。

图 2：使用 getComputedStyle 读取伪元素样式的四步标准流程

2. 完整读取代码示例与提取步骤

假设页面中存在带有角标的按钮组件：

/* CSS 样式声明 */
.notification-badge {
  position: relative;
}
.notification-badge::before {
  content: "★";
  color: #AD8060;
  font-size: 14px;
  width: 18px;
  height: 18px;
}

在 JavaScript 中按步骤获取其样式的完整实现如下：

// 步骤 1：获取宿主 DOM 节点并做防御性检查
const badgeEl = document.querySelector('.notification-badge');
if (!badgeEl) {
  throw new Error('宿主元素不存在');
}

// 步骤 2：创建伪元素计算样式快照
const pseudoStyle = window.getComputedStyle(badgeEl, '::before');

// 步骤 3：使用 getPropertyValue 读取目标属性
const rawContent = pseudoStyle.getPropertyValue('content');
const color = pseudoStyle.getPropertyValue('color');
const fontSize = pseudoStyle.getPropertyValue('font-size');

// 步骤 4：数据清洗与格式化
// 注意：content 返回值会被双引号包裹（例如 ""★""）
const cleanContent = rawContent.replace(/^["']|["']$/g, '');
const fontSizePx = parseFloat(fontSize);

console.log('伪元素图标文本:', cleanContent); // 输出: ★
console.log('伪元素颜色计算值:', color);        // 输出: rgb(173, 128, 96)
console.log('字号数值(px):', fontSizePx);       // 输出: 14

三、JavaScript 动态设置与修改伪元素样式的四种工程方案

由于 getComputedStyle() 返回的 CSSStyleDeclaration 是只读对象，执行 pseudoStyle.color = '#345E82' 在非严格模式下会静默失败，严格模式下会抛出 TypeError: Cannot assign to read only property 错误。

要在客户端动态改变伪元素的样式，必须利用 CSS 级联规则或属性联动。目前主流的四种工程方案如下：

图 3：JavaScript 动态修改伪元素样式的四种途径与数据流向

方案一：CSS 自定义属性（CSS 变量）—— 现代开发首选方案

这是当前 Web 工程中最推荐、最具可维护性的方案。伪元素能够完全继承其宿主 DOM 元素的作用域变量。我们可以在 CSS 中将伪元素样式绑定为 CSS 变量，在 JS 中直接修改宿主元素的内联自定义变量。

/* 1. CSS 预先定义变量挂钩 */
.progress-bar {
  position: relative;
  height: 8px;
  background-color: #EBF1F6;
}

.progress-bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  /* 绑定 CSS 变量，提供缺省回退值 */
  width: var(--progress-val, 0%);
  background-color: var(--progress-color, #345E82);
  transition: width 0.3s ease;
}

// 2. JS 运行时直接动态修改宿主元素的变量
const bar = document.querySelector('.progress-bar');

// 更新进度与颜色
bar.style.setProperty('--progress-val', '75%');
bar.style.setProperty('--progress-color', '#AD8060');

方案二：类名切换（Class Toggling）—— 离散 UI 状态管理

当伪元素的样式变动属于有限的离散状态（例如：激活、禁用、高亮、告警）时，最符合语义的做法是预先在 CSS 中写好不同状态下的伪元素规则，由 JS 切换类名来触发。

/* CSS 预置不同状态规则 */
.status-pill::before {
  content: "●";
  color: #546E7A;
  margin-right: 6px;
}

/* 激活状态 */
.status-pill.is-online::before {
  color: #2E7D32;
}

/* 告警状态 */
.status-pill.is-error::before {
  color: #AD8060;
}

// JS 切换状态
const pill = document.querySelector('.status-pill');

// 激活在线状态
pill.classList.remove('is-error');
pill.classList.add('is-online');

方案三：结合 HTML data-* 属性与 content: attr()

如果动态变化的需求仅仅是修改伪元素的文字内容（如未读消息红点数字、卡片标签），利用 CSS 的 attr() 函数是最轻量且无侵入的做法。

/* CSS 绑定 data 属性 */
.cart-icon {
  position: relative;
}

.cart-icon::after {
  content: attr(data-badge-count);
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #AD8060;
  color: #FFFFFF;
  font-size: 11px;
  border-radius: 10px;
  padding: 1px 5px;
}

// JS 直接更新宿主的 dataset
const cartBtn = document.querySelector('.cart-icon');

// 动态变更红点数字
cartBtn.dataset.badgeCount = '12';

// 当数字为 0 时隐藏（可通过置空移除）
cartBtn.dataset.badgeCount = '';

方案四：动态注入 <style> 标签与 CSSOM 样式表规则

若需要动态生成不确定的复杂规则，且无法预先在 CSS 中写好变量钩子（例如动态根据用户输入生成跨多个选择器的规则），可以通过操作文档样式表直接添加规则。

/**
 * 动态向 head 注入针对指定选择器的伪元素规则
 * @param {string} selector 宿主选择器
 * @param {string} pseudo 伪元素标识，如 '::before'
 * @param {string} declarations 样式声明字符串
 */
function setPseudoStyleGlobally(selector, pseudo, declarations) {
  let dynamicStyle = document.getElementById('dynamic-pseudo-style');
  if (!dynamicStyle) {
    dynamicStyle = document.createElement('style');
    dynamicStyle.id = 'dynamic-pseudo-style';
    document.head.appendChild(dynamicStyle);
  }

  const rule = `${selector}${pseudo} { ${declarations} }`;
  dynamicStyle.sheet.insertRule(rule, dynamicStyle.sheet.cssRules.length);
}

// 调用示例：全局修改高亮浮层伪元素
setPseudoStyleGlobally('.dynamic-highlight', '::after', 'background-color: #AD8060; transform: scale(1.1);');

四、方案选型指南与性能权衡

在实际项目架构中，不同的场景应匹配不同的修改方案。下表梳理了四种方案的工程指标差异：

图 4：伪元素样式修改方案的技术选型决策树与综合评估

五、工程实践中的高频问题与避坑清单

1. 通过 CSS 变量设置 content 时的引号转义：

   如果需要通过 CSS 变量动态修改伪元素的 content 文本内容，在 JS 传递字符串时必须显式包含引号。例如：

   /* CSS */
   .user-card::before {
     content: var(--custom-text, "");
   }

   // JS 正确写法：包含内层引号字符串
   card.style.setProperty('--custom-text', '"管理员用户"');
   
   // 错误写法：缺少引号会导致 CSS 将其当做无效标识符丢弃
   card.style.setProperty('--custom-text', '管理员用户');

2. 防范 getComputedStyle 导致的强制同步布局（Layout Thrashing）：

   window.getComputedStyle() 为了返回精确的渲染尺寸，会在调用瞬间清空渲染队列并强制触发重排（Reflow）。在动画循环（如 requestAnimationFrame 或 scroll 事件）中高频调用该方法会导致严重的掉帧现象。正确的做法是在布局未变时缓存读取结果，避免在循环体内读写交替。

3. 伪元素未生效时的计算返回值：

   如果 CSS 中未给伪元素声明 content 属性，或者宿主元素处于 display: none 状态，浏览器虽然仍能返回 CSSStyleDeclaration 对象，但绝大多数布局相关属性（如 width、height）会返回 "auto" 或 "0px"，content 会返回 "none"。在读取前需确保宿主已挂载且处于可见状态。

4. 双冒号规范（::）与单冒号（:）的区别：

   CSS3 规范严格区分了伪类（如 :hover、:first-child，单冒号）与伪元素（如 ::before、::after，双冒号）。虽然为了向下兼容 IE8，现代浏览器对 ':before' 依然予以解析，但在现代工程代码中，均应遵循标准规范统一书写双冒号。