gpt4 book ai didi

html - 使用 CSS 打印网页的一部分

转载 作者:行者123 更新时间:2023-11-28 16:56:41 26 4
gpt4 key购买 nike

我在一个页面上工作,用户可以点击一个按钮并在页面上打印一些重要信息。

基本页面结构如下:

<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 个投票的答案。

最佳答案

好吧,可能很多子元素也会受到影响。试试这个:

@media print {
body * {
display:none;
}

body #printContent {
display:block;
}

body #printContent * {
display:initial;
}
}

从技术上讲,您也在重置内部内容的显示。你明白吗?当你给全局选择器 body * 时,它也会隐藏内部组件。所以仅仅取消隐藏父 #printContent 将不足以取消隐藏它的 child 。为了避免所有这些麻烦,如果 #printContentbody 的直接后代,您可以这样做:

@media print {
body > * {
display:none;
}

body > #printContent {
display:block;
}
}

关于html - 使用 CSS 打印网页的一部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31999450/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com