为什么document.getElementsByClassName获取的元素style.display返回空字符串

• HTMLElement.style 对象仅能读取和修改元素行内 style 属性中直接定义的CSS属性，外部CSS文件、<style> 标签内定义的样式，以及浏览器内置的用户代理默认样式，都不会同步到这个对象中。
• 你初始没有给目标img元素设置行内display属性，哪怕在CSS里定义了display: block，或是img默认的display: inline，都不属于行内style的内容，所以a[0].style.display只会返回空字符串，和样式是否生效无关。
• 你在init函数中主动给a[0].style.display赋值的操作，本质是给元素新增了行内style属性，所以后续就可以正常读取到值了。

如果不想额外做初始化操作，可以用 window.getComputedStyle() 方法直接获取元素实际渲染生效的计算样式，不需要依赖行内属性：

// 按钮点击触发函数
function togglePhotoDisplay() {
  const photoEl = document.querySelector('.photo');
  // 获取元素当前实际生效的display属性值
  const currentDisplay = window.getComputedStyle(photoEl).display;
  photoEl.style.display = currentDisplay === 'none' ? 'block' : 'none';
}

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