如何通过点符号或方括号直接获取CSS自定义变量而不使用getComputedStyle

核心结论 #

无法直接通过点符号/方括号读取定义在样式表（如<style>标签、外部CSS文件）中的CSS自定义变量，你预期的写法仅对行内定义的自定义变量在部分浏览器中有限生效。

常规CSS属性（如color、background-color）可以直接通过style对象的点/方括号访问，是因为浏览器内置了原生属性到style对象的映射规则，自动做了属性名转换和取值同步。而CSS自定义变量属于动态自定义属性，没有被纳入原生属性映射列表，因此不支持通用的直接访问。

补充说明 #

• 仅针对行内style属性中定义的自定义变量，你可以直接通过style对象的标准方法读取，不需要调用getComputedStyle：

// 仅当--dark-color定义在<html style="--dark-color: black">时可正常读取
const darkColor = document.documentElement.style.getPropertyValue('--dark-color');

你提到的document.documentElement.style['--dark-color']写法在部分现代浏览器中也能读取行内自定义变量，但属于非标准用法，兼容性没有保障，不推荐生产环境使用。

• 如果你需要设置CSS自定义变量，无论目标变量原本定义在哪里，都可以直接用style对象的标准setProperty方法操作：

// 设置自定义变量值
document.documentElement.style.setProperty('--dark-color', '#222');
// 可选第三个参数设置优先级
document.documentElement.style.setProperty('--dark-color', '#222', 'important');

• 只有需要读取非行内定义的、经过浏览器计算生效的自定义变量值时，才需要使用getComputedStyle方法：

// 读取定义在:root选择器下的自定义变量计算值，trim用于清理返回值可能带的前后空格
const darkColor = getComputedStyle(document.documentElement).getPropertyValue('--dark-color').trim();

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