CSS打印隱藏除一個元素之外的所有元素

我一直在尋找解決方案。我想要一件事。當使用@media print {...}我想隱藏所有元素而不是一個。怎麼做？我有我不想隱藏的class =「print」，如何隱藏所有沒有這個類的東西？CSS打印隱藏除一個元素之外的所有元素

<!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>

來源

2014-02-13 FosAvance

這是'一件事'是其他元素的孩子，你也不想打印？ –

是身體的小孩 – FosAvance

那麼，除了身體。它是身體下面的頂級DOM元素嗎？ –

這取決於你的DOM結構。

你要隱藏的每個頂級節點（因此，他們的子女）用CSS（display: none）除了你要打印項目和所述項目的每一個父元素（即你不不想隱藏包含要打印的項目的頂級節點）。

你可以用一些javascript來設置它（相對）很容易 - jQuery會有所幫助。

給你想打印一類的項目（S），如「printThis」
分配身體的每一個頂級的孩子，被設置爲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'));

然後您打印的CSS將有：

.doNotPrint {display: none;}

來源

2014-02-13 23:08:09

@Musa我不認爲'length'是必要的。父或者存在或它不 –

你知道'.parent（）'返回什麼嗎？ – Musa

@musa off去玩這個... :) BRB –

隱藏在身體沒有一個print類中的每個子元素

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

一旦沒有文本節點直接在bodytis應該工作。

來源

2014-02-13 23:15:11 Musa

如前所述，只有當要打印的項目是身體的直接後代時才能使用。 –

@DA。你的意思是身體的一個孩子？...是的。 – Musa

是的，我認爲'孩子'和'直系後裔'在這裏意味着同樣的事情。是的，在這個例子中。但應該指出的是，這是解決方案的關鍵部分。 –

CSS打印隱藏除一個元素之外的所有元素

回答

相關問題