我一直在网上寻找解决方案. 我想要一件事.当使用@media print {…}时我想要隐藏身体内的所有元素但只有一个.怎么做？ 我有class =“print”,我不想隐藏,如何隐藏所有没有那个类？ !DOCTYP
我想要一件事.当使用@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>
这取决于您的DOM结构.
您希望使用CSS(显示：无)隐藏每个顶级节点(因此,他们的孩子),除了您要打印的项目和所述项目的每个父元素(即,您不想隐藏包含要打印的项目的顶级节点.
你可以用一些javascript轻松设置(相对) – jQuery会有所帮助.
>给你打印一个类的项目,例如’printThis’
>为BODY的每个顶级子项分配一个设置为显示的类：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'));
然后你的打印CSS将有：
.doNotPrint {display: none;}