Question

我一直在网上寻找解决方案。我想要一件事。当使用@media print {...}时我想要隐藏身体内的所有元素但只有一个。怎么做？我有class =“print”，我不想隐藏，如何隐藏所有没有那个类？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@media print {
:not(.print) {
    display: none
}
}
</style>
</head>

<body>
<div class="print">
  <p>neki lijepi tekst</p>
  <p> test</p>
</div>
<div id="test"> ovo se ne vidi naa printu </div>
<div id="tesft"> ovo se nedsfdf vidi naa printu </div>
</body>
</html>

Answer 1

隐藏身体的每个子元素而不使用print类

body > * { display: none }
.print { display: block }

一旦没有直接在bodytis中的文本节点应该工作。

Answer 2

这取决于你的DOM结构。

您希望隐藏每个顶级节点（因此，他们的子节点）使用CSS（display: none）除之外的和每个父级的项目所述项目的元素（即，您不希望隐藏包含要打印的项目的顶级节点）。

你可以用一些javascript轻松设置（相对） - jQuery会有所帮助。

提供您要打印类别'printThis'
为BODY的每个顶级子级分配一个设置为display: none的类，例如'doNotPrint'
找到您要打印的项目（通过班级'printThis'）
遍历DOM向每个父级移除您应用的类以隐藏所有内容（并且可能将hide类应用于该过程中的所有兄弟姐妹）

未经过测试，但在页面加载时运行类似的设置类：

// to start, hide all top level nodes
$('body').children().addClass('doNotPrint')

// now we call this function passing in the 
// item to print
function showItem($node) {
    // remove the 'hide' class. This is moot
    // until we loop to the top level node, at
    // which point this takes affect
    $node.removeClass('doNotPrint');
    // we don't want to print the siblings
    // so we will hide those
    $node.siblings().addClass('doNotPrint')
    // now we check to see if this item has a parent
    // and, if so...
    if($node.parent().length){
        // ...we want to show the parent, hide its 
        // siblings, and then continue this process
        // back to the top of the node tree
        showItem($node.parent());
    } 
}

showItem($('.printThis'));

然后你的Print CSS会有：

.doNotPrint {display: none;}

CSS Print会隐藏除一个之外的所有元素

2 个答案: