Question

我的打印样式有以下CSS：

* {
 display:none;
}

#printableArea {
 display:block;
}

我希望这会隐藏所有元素，并且只显示printableArea，但是所有都会被隐藏。在打印视图中，我得到的只是一个空白页。

我已将其正确包含在HEAD中，并在此特定样式表上添加了media="print"。

Answer 1

如果未显示某个元素，则不会显示任何子元素（无论其显示属性设置为什么）。

*与<html>元素匹配，因此隐藏整个文档。

你需要对你隐藏的东西更有选择性。

Answer 2

您采用了正确的通用方法，但是您希望使用visibility: hidden代替display: none，以便可以将子元素设置为可见。

请参阅Print <div id=printarea></div> only?

Answer 3

html body * {
 display:none;
}

#printableArea {
 display:block;
}

另外，你可能需要#printableArea上的！important，但可能不需要。

Answer 4

正在回答，因为我在搜索该问题时发现了这个问题

您可以使用：

代替“显示：无”

* {
     visibility: hidden;
     margin:0; padding:0;
    }

    #printableArea * {
      visibility: visible;
    }

源：https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa

Answer 5

您可以尝试在所有内容之上弹出它。这解决了我90％的问题，然后我只需要创建一个value = param.to_f # will return 0.0 when param is nil or empty string类并将其添加到一些分散的元素中。

.noprint

Answer 6

如果你想使用JavaScript，你可以试试这个甚至不需要jQuery的简单片段：

document.body.innerHTML=document.getElementById('printableArea').innerHTML;

Answer 7

有一个单行解决方案：

使用JQuery

var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });

没有JQuery

selector

在这两个示例中，将div#page:hover变量设置为所需的选择器。例如，p.class1,p.class2或<input type="submit" name="run-function-button" id="run-function-button" value="Execute Function"> <script> $('#run-function-button').click(function() { $.ajax({ type: "POST", url: "your-file.php", data: { name: "run-function" } }); }); </script> <?php if (isset($_POST['name'])) { index(); } ?>

Answer 8

使div在body标签之后包装所有内容。在包装div之前，放置可见商品的div。

我必须这样做才能制作一个简单的用户名-密码页面，并且需要隐藏所有内容，除了半透明的登录表单背景之外。因此，在输入正确的凭据后，表格将进行动画处理，半透明的页面封面将进行动画处理，最后，所有内容都会显示出来，您可以正常使用该页面。

Answer 9

@media print {
    * {
        visibility: hidden;
    }

    /* Show element to print, and any children he has. */
    .svgContainer, .svgContainer * {
        visibility: initial;
    }
}

确保任何子元素也可见。请记住，不可见元素仍然会影响页面中其他元素的位置。在我的简单情况下，我只是在position: fixed;（其他地方）上添加了.svgContainer。

为打印视图隐藏除一个div之外的所有元素

9 个答案: