getComputedStyle 无法直接读取伪元素的 CSS 变量，只能获取其被 var() 引用后计算出的真实属性值（如 color、content）；变量未被实际使用则返回空字符串，需通过间接方式探测或修改宿主元素样式。
用 getComputedStyle 获取伪元素的 CSS 变量值
不能直接读取伪元素上定义的 --my-var，但可以读它「计算后」的值——只要这个变量已被用于某个可计算的 CSS 属性（比如 color、content、font-size），getComputedStyle 就能取到最终结果。
关键点在于：CSS 变量本身不是“属性”，它必须被 var(--my-var) 调用并落地为某个真实属性，才能被 JavaScript 观测到。
-
window.getComputedStyle(element, '::before').getPropertyValue('color')能拿到color: var(--text-color, #333);计算后的 RGB 值 -
getPropertyValue('content')会返回带引号的字符串，例如"\"Hello\""，注意双层引号嵌套 - 如果变量只定义在伪元素规则里但没被任何属性使用（比如
--icon-size: 16px;单独一行），那它不会出现在计算样式中，getPropertyValue返回空字符串
content 里用 var() 时怎么安全取值
当伪元素的 content 写成 content: var(--tip-text, "default");，JavaScript 取出来的值是带包裹引号的字符串，而且引号类型可能不一致（单/双/无），容易误判。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 推荐统一用双引号包裹变量值：
content: var(--tip-text, "default");→getComputedStyle(...).getPropertyValue('content')返回"\"default\"" - 用
JSON.parse()解包最稳：JSON.parse(contentValue)，它能自动处理"\"xxx\""或"'xxx'" - 别用
.replace(/^["']|["']$/g, '')简单去首尾引号——遇到content: "He said \"hi\"";就会崩
为什么 getPropertyValue('--my-var') 总是空
因为 --my-var 是自定义属性，不是标准 CSS 属性，getComputedStyle 不会把它列在返回对象里，哪怕它出现在伪元素的样式块中。
立即学习“前端免费学习笔记（深入）”；
- 只有被
var(--my-var)实际引用并参与计算的属性（如background-color、opacity）才会暴露出来 - 想“间接探测”变量是否存在？可以临时加一个隐藏属性，比如
border-top: 1px solid var(--my-var, transparent);，再读borderTopColor - 更可靠的做法是：把变量值也映射到
data-属性上，或用CSSStyleSheet.cssRules手动解析样式表（但兼容性和维护成本高）
修改伪元素的 CSS 变量值要改哪里
伪元素没有 DOM 节点，所以不能对它调用 style.setProperty。你得把变量挂载到它的宿主元素上，再让伪元素通过 var() 继承。
- 正确方式：
element.style.setProperty('--icon-color', 'blue');，前提是 CSS 中写的是.target::before { color: var(--icon-color); } - 如果变量定义在
:root或外部样式表里，需用document.documentElement.style.setProperty修改全局作用域 - 注意优先级：内联
style> ID 选择器 > 类选择器，确保你的setProperty能覆盖原有声明
!important 锁死、或者根本没在生效的选择器范围内。调试时先检查 computed styles 面板里的“Styles”标签页，看变量展开后的实际值在哪一级被确定。 
