为何JavaScript中element.style始终返回空值？

这是个很常见的疑惑，核心原因其实是**element.style这个API的设计初衷就不是用来读取CSS类或<style>标签里定义的样式**——它只负责处理元素的内联样式，也就是直接写在HTML元素的style属性里的那些样式。

举个例子看差异 #

你第一个例子里，CSS规则给元素设置了display: block，但这个样式是写在CSS代码块里的，不是元素自身style属性的内容，所以document.getElementById('test').style.display自然返回空字符串。而当你给元素加了<div style="display:none" id="test">这种内联样式时，style.display就能读取到none，因为这是直接存在于元素的内联样式属性里的内容。

JavaScript能读取CSS中的样式吗？当然可以！ #

你不用担心JavaScript拿不到CSS里的样式，只是不能用element.style而已。要获取元素最终渲染时实际应用的所有样式（包括来自CSS类、全局样式、继承样式等所有来源的计算结果），你需要用window.getComputedStyle()方法。

比如针对你最后那个例子，修改代码就能拿到正确的样式值：

const testElement = document.getElementById('test');
// 获取元素的计算样式
const finalStyle = window.getComputedStyle(testElement);

// 读取计算后的样式属性
console.log(finalStyle.display); // 输出 "block"
console.log(finalStyle.alignContent); // 输出 "center"

额外提醒 #

getComputedStyle()返回的是一个只读的样式对象，你不能直接修改它的值。如果要修改元素的样式，还是得用element.style来设置内联样式，或者通过修改元素的classList来切换CSS类——后者也是更推荐的方式，符合样式与逻辑分离的最佳实践。

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