jquery - 空白在 CSS 网格布局中占用空间

Question

我正在使用 .text() 函数替换位于 CSS 网格布局中的 div 中的文本，如果 $(this).is(':contains("N/A")') 返回 true。我的问题是我希望 div 继续占据空间，就好像它确实包含文本一样。但是，它不会这样做，并且我的容器不会像存在文本时那样占据整个空间的高度。有没有办法在不指定每行 div 的 height 的情况下做到这一点？

Answer 1

您可以使用 visibility: hidden 来隐藏元素同时保持边界:

function hide() {
  document.getElementsByTagName('span')[0].className = 'hidden';
}

div {
  background: orange;
  border: solid 3px black;
}

.hidden {
  visibility: hidden;
}

<div>
  <span>Lorem ipsum</span>
</div>
<button onclick="hide()">Hide</button>