使用getElementById无法读取div的display属性问题求助

嘿，这个问题我太熟了！你踩的是element.style属性的一个常见坑——它只能读取元素标签上直接写的内联样式，比如 <div id="item" style="display:none"> 这种写法里的样式。而你现在把display:none放在了<style>标签的CSS规则里，属于内部样式表，所以item.style.display自然是空字符串，你的条件判断根本触发不了弹窗。

问题根源拆解 #

element.style 对象只存储元素的内联样式声明，也就是写在元素style属性里的内容。对于外部CSS文件、内部<style>标签里的样式，它完全读不到。这就是为什么你alert出来是空的，两个条件都不满足，自然没弹窗。

几种靠谱的解决方案 #

方案1：用getComputedStyle获取实际生效的样式

这个方法能拿到元素最终渲染时的真实样式，不管样式定义在哪里：

function showalert() {
  var item = document.getElementById('item');
  // 获取元素计算后的最终样式
  var actualDisplay = window.getComputedStyle(item).display;
  
  if (actualDisplay === "none") {
    alert("Not shown");
    item.style.display = "block"; // 切换为显示
  } else if (actualDisplay === "block") {
    alert("shown");
    item.style.display = "none"; // 切换为隐藏
  }
}

方案2：用CSS类切换（更推荐，更易维护）

直接操作类名比修改style属性更清晰，也方便扩展样式：
首先更新你的CSS：

#item { 
  display: block; /* 默认状态设为显示 */
}
/* 定义一个隐藏类 */
.item-hidden { 
  display: none; 
}

然后修改HTML和JS：

<div id="item" class="item-hidden"> Div item </div>
<button onClick="toggleItem()">Click Me</button>

<script>
function toggleItem() {
  var item = document.getElementById('item');
  // 一键切换隐藏类
  item.classList.toggle('item-hidden');
  
  // 根据类判断状态并弹窗
  if (item.classList.contains('item-hidden')) {
    alert("Not shown");
  } else {
    alert("shown");
  }
}
</script>

方案3：快速判断元素可见性

如果只是想判断元素是否显示，也可以用offsetWidth/offsetHeight——元素隐藏时这两个值会是0：

function showalert() {
  var item = document.getElementById('item');
  var isHidden = item.offsetWidth === 0 || item.offsetHeight === 0;
  
  if (isHidden) {
    alert("Not shown");
    item.style.display = "block";
  } else {
    alert("shown");
    item.style.display = "none";
  }
}

为什么之前能实现？ #

大概率你之前是把display写在了元素的内联style属性里（比如<div id="item" style="display:none">），那时候item.style.display就能读到值，所以逻辑能正常运行。现在换了样式写法，就触发这个坑啦~

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