使用document.getElementById("X").style.backgroundColor获取背景色返回null的问题咨询

嘿，这问题我之前也踩过坑！咱们先搞明白为啥document.getElementById("X").style.backgroundColor会返回null：

• 核心原因：element.style属性只能读取元素的内联样式（也就是直接写在HTML元素style属性里的样式），而你的背景色是通过CSS类.main-sidebar设置的，不属于内联样式范畴，所以用这个方法自然拿不到对应值，返回null。

接下来给你两种可行的解决方法：

方法1：使用getComputedStyle获取计算后样式 #

这是最推荐的方案，它能拿到元素最终渲染时的所有样式（不管是类样式、外部样式还是内联样式）。代码示例：

const targetElement = document.getElementById("X");
const computedBgColor = window.getComputedStyle(targetElement).backgroundColor;
console.log(computedBgColor); // 输出类似 "rgb(52, 58, 64)"（对应#343a40的RGB转换值）

注意：这个方法返回的颜色值通常是RGB格式，如果需要十六进制格式，可以自己写个简单的转换函数，不过大部分场景下RGB格式也能满足需求。

方法2：改用内联样式（不推荐） #

如果你非要用element.style来获取，那只能把背景色直接写在元素的style属性里，像这样：

<div id="X" class="main-sidebar text-white" style="background-color: #343a40;"> </div>

但这种方式不建议采用，因为它把样式和HTML结构混在了一起，不利于后期的样式维护和复用，违背了样式与结构分离的原则。

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