本文详解如何通过 getcomputedstyle() 正确读取元素内联定义的 css 自定义属性（如 --main-color），并基于其值动态控制 dom 行为（如切换图片），避免常见误区（如误查 document.documentelement）。
本文详解如何通过 getcomputedstyle() 正确读取元素内联定义的 css 自定义属性（如 --main-color），并基于其值动态控制 dom 行为（如切换图片），避免常见误区（如误查 document.documentelement）。
在现代前端开发中，CSS 自定义属性（又称 CSS 变量）极大提升了主题化与动态样式的灵活性。当你在 HTML 元素上通过 style 属性声明变量（如 <div class="wrapper" style="--main-color: #123456;">），该变量仅作用于该元素及其后代，不会自动暴露在 document.documentElement 或全局样式上下文中。因此，直接调用 document.documentElement.style.getPropertyValue("--main-color") 必然返回空字符串——这是初学者最常见的错误。
正确做法是：先定位到声明该变量的元素，再通过 getComputedStyle() 获取其计算后的样式值。getComputedStyle() 返回的是应用了所有层叠规则（含内联 CSS 变量）后的最终样式对象，支持读取自定义属性：
const wrapper = document.querySelector(".wrapper");
const mainColor = getComputedStyle(wrapper).getPropertyValue("--main-color").trim();
console.log(mainColor); // 输出：#123456✅ 注意：.trim() 很关键——getPropertyValue() 返回的值可能包含首尾空格，尤其在多行或复杂写法下，不清理可能导致颜色匹配失败。
接下来，你可以基于该颜色值动态切换图片。例如，预设 4 种颜色映射关系：
立即学习“Java免费学习笔记（深入）”；
const colorToImageMap = {
"#ff0000": "red-img.png",
"#00ff00": "green-img.png",
"#0000ff": "blue-img.png",
"#ffff00": "yellow-img.png"
};
const wrapper = document.querySelector(".wrapper");
const mainColor = getComputedStyle(wrapper).getPropertyValue("--main-color").trim();
const imgSrc = colorToImageMap[mainColor] || "default-img.png";
document.getElementById("dynamic-image").src = imgSrc;同时，若需支持 CSS 变量更新后实时响应（如通过 JS 修改 --main-color），可封装为函数并在需要时调用，或结合 MutationObserver 监听 style 属性变更（适用于更复杂的动态场景）。
⚠️ 重要提醒：
- 自定义属性名区分大小写，确保 JS 中的字符串（如 "--main-color"）与 CSS 中声明的完全一致；
- 若变量在 CSS 文件中定义（非内联），需确保目标元素实际继承或作用域覆盖该变量；
- 颜色值格式需统一（推荐使用 #rrggbb 小写十六进制），避免因大小写或缩写（如 #f00）导致匹配失败。
掌握这一模式，你不仅能精准读取 CSS 变量，还能构建可维护的主题切换、暗色模式适配及条件渲染逻辑，真正实现 CSS 与 JS 的协同驱动。
