如何获取通过CSS类赋值的HTML元素的实际生效Style属性值

问题：两种情况下该DIV确实都是隐藏状态，但在第二种通过类设置样式的场景中，我要如何通过JavaScript代码检测它是否处于隐藏状态（也就是display属性为none）？

原因说明 #

element.style 只能读取写在元素标签style属性中的内联样式，通过CSS类、外部样式表定义的样式不属于内联样式，所以无法通过这个属性拿到对应值。

解决方法 #

要获取元素最终生效的渲染样式，使用window.getComputedStyle()方法即可，示例代码如下：

// 获取目标DOM元素
const myDiv = document.getElementById('myDiv');
// 获取元素的计算样式（包含所有样式来源最终生效的规则）
const computedStyle = window.getComputedStyle(myDiv);
// 判断是否为display: none隐藏状态
const isDivHidden = computedStyle.display === 'none';

注意事项 #

你之前示例代码中的getElementByID存在笔误，正确写法是getElementById（末尾的d为小写）。
getComputedStyle返回的是只读的样式对象，拿到的属性值都是浏览器实际渲染时生效的最终值，会自动合并内联样式、类样式、继承样式等所有来源的样式规则。

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