javascript - 我在 CSS 中设置了 HTML 元素的显示属性。但是，如果我在 javascript 中检查该值，它会显示空白

Question

在我单独的 CSS 文件中，我将 div 的显示属性设置为“无”。

HTML 文件:

<div class="ttt"><span id="debugInfo">Load Time, Render Time, Latency, TCP Handshake time, etc ...</span></div>

CSS 文件:

.ttt {
       display: none;
       background-color: rgb(184, 88, 88);
}

div 正在将其背景更改为指定的颜色，并且 div 会像预期的那样消失。

但是，如果我检查 Javascript 中的属性，它是空白的。我在很多其他地方都得到了这样的元素。我检查了一下，我得到了正确的 div。只是如果我检查 style.display 我会一片空白。

Javascript 文件:

function changeVisibilty(pID, pInline) {
  var el = document.getElementById(pID);

  console.log(el.style.display); return;

  //   console.log(el); return;
}

现在，如果我去掉 CSS display: none 并将其内联到 HTML 中，它就可以工作了。

div class="ttt" style="display: none"><span id="debugInfo">Load Time, Render Time, Latency, TCP Handshake time, etc ...</span></div>

正如我之前所说，CSS 正在运行。因为，它设置背景颜色并使 div 消失。 HTML 和 CSS 已通过验证器运行。我不想使用任何其他方法。比如将 hidden 设置为 false、改变不透明度、将其移出屏幕等......

我需要将样式内容保留在 CSS 文件中，并且我想使用 display: none。

Answer 1

您可以使用 window.getComputedStyle() 获取元素的 CSS 集。 .style 检查 HTML 中的 style 属性值。

另请注意，.getElementById() 通过id 获取元素，您可以使用.querySelector() 来选择具有 的元素>class 设置为 "ttt"。

function changeVisibilty(pID, pInline) {
  var el = document.querySelector(pID);
  console.log(window.getComputedStyle(el).display);
}

onload = () => changeVisibilty(".ttt")

.ttt {
  display: none;
  background-color: rgb(184, 88, 88);
}

<div class="ttt"><span id="debugInfo">Load Time, Render Time, Latency, TCP Handshake time, etc ...</span></div>