伪元素（如::before、::after）不是真实dom节点，无法被document.queryselector直接选中或绑定事件；但可通过getcomputedstyle(el).getpropertyvalue()读取宿主元素上定义的css变量，再在伪元素中用var()引用，实现间接控制。
伪元素本身无法直接被JS访问
CSS 伪元素（如 ::before、::after）不是真实 DOM 节点，document.querySelector 或 getComputedStyle 都不能直接选中它们。所以你不能写 document.querySelector('::before')——这会报错或返回 null。
但你可以间接读取伪元素上设置的 CSS 自定义属性（即 --my-var），前提是这些属性被声明在**宿主元素**上（常见做法），或者通过 getComputedStyle(el).getPropertyValue() 从宿主元素“继承”而来。
正确做法：把自定义属性写在宿主元素上
绝大多数情况下，你想让伪元素用某个值，其实是把该变量挂载到其父/宿主元素的样式里，再在伪元素 CSS 中用 var(--my-var) 引用。这样 JS 就能通过宿主元素读到它：
.box {
--icon-color: #ff6b35;
--label-text: "New";
}
.box::before {
content: var(--label-text);
color: var(--icon-color);
}
然后在 JS 中读取：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
const el = document.querySelector('.box');
const style = getComputedStyle(el);
console.log(style.getPropertyValue('--icon-color').trim()); // "#ff6b35"
console.log(style.getPropertyValue('--label-text').trim()); // '"New"'
- 注意
getPropertyValue()返回的是原始字符串，带空格和引号（比如字符串值会返回"New"，需用.trim()和.replace(/^"|"$/g, '')清理） - 如果属性未定义，返回空字符串，不是
undefined - 该方式兼容所有现代浏览器（Chrome 48+、Firefox 31+、Safari 9.1+）
为什么不能直接读伪元素上的 content 值？
即使你在 ::before { content: "Hello"; } 中硬编码了内容，getComputedStyle(el, '::before') 在多数浏览器中**不被支持**（仅 Firefox 支持第二个参数传伪元素字符串，且行为不稳定）。
- Chrome / Safari：传
'::before'会被忽略，等价于只传元素，返回宿主的计算样式 - Firefox：支持
getComputedStyle(el, '::before')，但content值返回为normal或none，而非实际字符串（除非是attr()或var()引用） - 所以别依赖
getComputedStyle(el, '::before').content获取文本内容
想动态控制伪元素内容？改 CSS 变量比操作伪元素更可靠
如果你原本想“用 JS 改伪元素的文字”，正确路径是：JS 修改宿主元素的 CSS 变量，CSS 自动响应更新伪元素。
const el = document.querySelector('.box');
el.style.setProperty('--label-text', '"Updated"');
// .box::before 的 content 会立刻变成 "Updated"
- 避免操作
innerHTML或插入真实节点来模拟伪元素——语义和可维护性都差 - 注意
setProperty()的值必须是合法 CSS 值格式：字符串要加双引号（"\"Text\""），颜色可直接写#fff - 若变量值来自用户输入，务必做基本转义（比如替换双引号为
\"），否则可能破坏 CSS 解析
真正麻烦的点在于：伪元素不是 DOM，它的“存在感”全靠宿主元素的样式声明撑着；而 JS 只能摸到宿主这一层。所以所有读写动作，都得绕回这个锚点——漏掉这点，就容易卡在“为什么取不到”上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
