为什么 CSS 样式属性在 getElementById().style 中仍为空

当您使用 getElementById() 检索 HTML 元素时，访问其尽管存在 #map {display: 等 CSS 样式规则，但通过 element.style.display 的 style 属性通常会返回空值。 block}.

出现此行为是因为 element.style 仅反映 HTML 文档中元素上显式设置的内联样式。如果没有定义内联样式，则 element.style 将为空。

要访问元素的实际计算样式（包含内联样式和 CSS 规则），请使用 window.getCompulatedStyle() 方法。此方法提供一个 Style 对象，表示应用于元素的完整样式。

例如，调用 console.log(window.getCompulatedStyle(document.getElementById('test')).display) 将输出“block, " 反映 #map {display: block} 规则。

虽然内联样式通常不鼓励使用 CSS，但理解 element.style 和 window.getComputedStyle() 之间的区别至关重要用于准确访问 JavaScript 中的元素样式。