使用CSS打印网页的一部分
使用CSS打印网页的一部分
提问于 2015-08-13 22:26:26
我在一个页面上工作，在那里用户可以点击一个按钮并在页面上打印一些重要的信息。
基本页面结构如下：
<body>
<div id="printContent"></div>
<button>Print</button>
</body>所需的行为是:当打印页面时，应该只打印"printContent“中的内容。
在使用js代码之前，我暂时用printContent中的内容替换了正文，但当用户退出打印选项弹出窗口时，这似乎会使页面变慢一些。(临时内容将占据整个页面几秒钟，或者一些按钮和链接在几秒钟内变得无响应。)所以在这里提到第二个答案之后：How do I print part of a rendered HTML page in JavaScript?
我使用了类似这样的东西：
@media print {
body * {
display:none;
}
body #printContent {
display:block;
}
}但在打印时，printContent部件仍然不可见。我做错什么了吗？谢谢。
编辑:我的错，这不是来自链接的第二个答案，第二个“最高支持率答案”，也就是有15个赞成票的答案。
回答 1
Stack Overflow用户
发布于 2015-08-13 22:45:55
好吧，可能也有很多子元素受到影响。试试这个：
@media print {
body * {
display:none;
}
body #printContent {
display:block;
}
body #printContent * {
display:initial;
}
}从技术上讲，您也在重置内部内容的display。你明白吗？当您给全局选择器body *时，它也会隐藏内部组件。因此，仅仅取消隐藏父#printContent并不足以取消隐藏它的子项。为了避免所有这些麻烦，如果#printContent是body的直系后代，您可以这样做
@media print {
body > * {
display:none;
}
body > #printContent {
display:block;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31999450
复制相关文章
相似问题
腾讯云开发者
