咨询：点击打印仅显示p标签内容及临时用p/div替代body的实现方法

嘿，这两个需求其实都能通过CSS结合JavaScript轻松实现，咱们一步步来拆解：

1. 隐藏Body标签但显示指定Div #

直接给body设置display: none或者visibility: hidden的话，它的所有子元素都会跟着被隐藏，所以得换个思路——让Body里的其他元素全部隐藏，只保留目标Div显示：

静态实现（页面加载后直接生效） #

<style>
  /* 隐藏body下所有子元素 */
  body > * {
    display: none;
  }
  /* 单独让指定div显示 */
  #target-div {
    display: block;
    /* 可选：如果需要占满屏幕，添加以下样式 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
</style>

<body>
  <div id="other-content">这部分内容会被隐藏</div>
  <div id="target-div">这是需要保留显示的指定内容</div>
</body>

动态切换（比如按钮触发显示/恢复） #

如果需要临时切换状态，用JS给Body添加/移除类来控制：

// 切换到仅显示指定div的状态
function showOnlyTargetDiv() {
  document.body.classList.add('hide-all-except-target');
}

// 恢复页面正常显示
function restorePage() {
  document.body.classList.remove('hide-all-except-target');
}

对应的CSS：

body.hide-all-except-target > * {
  display: none;
}
body.hide-all-except-target #target-div {
  display: block;
}

2. 点击打印按钮时仅保留P标签内容 #

这个需求有两种优雅的实现方式，根据你的场景选择：

方法1：纯CSS打印媒体查询 #

直接通过打印专属样式控制，不需要额外JS：

/* 屏幕显示时正常渲染 */
@media screen {
  /* 你的正常页面样式 */
}

/* 打印时仅显示p标签 */
@media print {
  body > * {
    display: none !important;
  }
  /* 确保所有层级的p标签都显示（包括嵌套在div里的） */
  body p {
    display: block !important;
    font-size: 12pt;
    margin: 0 0 10pt 0;
  }
}

打印按钮直接调用浏览器原生打印：

<button onclick="window.print()">打印仅P内容</button>

方法2：JS动态控制（更灵活） #

如果需要精准控制某几个特定P标签，或者打印后自动恢复样式，用JS临时修改：

function printOnlyPContent() {
  // 先保存所有元素的原始显示状态
  const bodyChildren = document.body.children;
  const originalStyles = [];
  for (let elem of bodyChildren) {
    originalStyles.push({
      elem: elem,
      display: elem.style.display
    });
    // 临时隐藏所有元素
    elem.style.display = 'none';
  }

  // 显示所有p标签
  const allPTags = document.querySelectorAll('p');
  allPTags.forEach(p => {
    p.style.display = 'block';
  });

  // 触发打印
  window.print();

  // 打印完成后恢复原始样式
  setTimeout(() => {
    originalStyles.forEach(item => {
      item.elem.style.display = item.display;
    });
    allPTags.forEach(p => {
      p.style.display = '';
    });
  }, 100);
}

对应的按钮：

<button onclick="printOnlyPContent()">打印仅P内容</button>

关于“能否让P/Div临时充当Body”？ #

其实完全没必要这么做——Body是HTML文档的根容器，强行替换它会破坏文档结构，反而容易引发样式或脚本异常。咱们上面的方案都是通过样式控制显示隐藏，既简单又安全，完全能达到你想要的效果。如果需要让目标元素像Body一样占满屏幕，只需要给它加position: fixed; width: 100%; height: 100%;就能实现啦。

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