如何根据p标签的文本存在状态控制对应div元素的显示与隐藏

你可以根据自己的使用场景，选择纯CSS或JavaScript两种方案实现：

方案1：纯CSS实现 #

仅需几行CSS即可完成，适合p标签内容固定、不会动态修改的场景，目前主流浏览器均支持该写法。
核心依赖CSS的:empty和相邻兄弟选择器：

/* 默认隐藏目标div */
div.something {
  display: none;
}
/* 当p标签非空时，显示紧随其后的.something div */
p#my-text-is-used-to-hide-you:not(:empty) + div.something {
  display: block;
}

注意：CSS的:empty判定规则较为严格，p标签内存在空格、换行符等空白字符时，都会被判定为「非空」，如果你的场景中p标签可能存在冗余空白内容，推荐使用JS方案。

方案2：JavaScript实现 #

兼容性更好，支持自定义内容判断规则，也适配p标签内容动态变化的场景。

基础实现（页面加载时判断一次） #

const pElement = document.getElementById('my-text-is-used-to-hide-you');
const targetDiv = document.querySelector('.something');
// trim()用于忽略首尾空白字符，不需要的话可以去掉
const pHasContent = pElement.textContent.trim().length > 0;
targetDiv.style.display = pHasContent ? 'block' : 'none';

动态监听实现（p内容变化时自动同步div显隐） #

如果p标签的内容是后续通过接口、用户操作动态修改的，可以加MutationObserver监听：

const pElement = document.getElementById('my-text-is-used-to-hide-you');
const targetDiv = document.querySelector('.something');

// 定义显隐更新逻辑
const updateDivVisible = () => {
  const pHasContent = pElement.textContent.trim().length > 0;
  targetDiv.style.display = pHasContent ? 'block' : 'none';
};

// 初始化执行一次
updateDivVisible();

// 监听p标签内容变化
const observer = new MutationObserver(updateDivVisible);
observer.observe(pElement, {
  childList: true,
  characterData: true,
  subtree: true
});

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