时间戳

首页 > 解决方案 > 根据文本显示/隐藏 Div

javascript - 根据文本显示/隐藏 Div

问题描述

我想知道如果段落标签有文本，是否有办法显示/隐藏 div。

如果 p 标签中有文本，则 div 需要显示，否则需要隐藏。

<p id="my-text-is-used-to-hide-you">I'm full</p>

<div class="something">Try to hide me</div>

标签： javascripthtmlcss

解决方案

这听起来像是 and 的组合:not，:empty然后针对兄弟姐妹<div>。像这样的东西：

p:not(:empty) + div {
  display: none;
}
<p id="my-text-is-used-to-hide-you">I'm full</p>

<div class="something">Try to hide me</div>

当然，如果您使用的 HTML 比您显示的更复杂，这些选择器可能会发生巨大变化。但这个概念本身至少是可能的。

如果真正的目标结构比 CSS 可以合理处理的更复杂，那么您将在 JavaScript 中寻找更强大的功能：

if (document.querySelector('#my-text-is-used-to-hide-you').innerText !== '') {
  document.querySelector('div.something').style.display = 'none';
}
<p id="my-text-is-used-to-hide-you">I'm full</p>

<div class="something">Try to hide me</div>

推荐阅读