隱藏除一個格打印檢視所有元素

我已經爲我的打印樣式下面的CSS：隱藏除一個格打印檢視所有元素

* { 
display:none; 
} 

#printableArea { 
display:block; 
}

我預計這個隱藏所有元素，並且只顯示printableArea，但是一切得到隱。在打印視圖中，我得到的只是一個空白頁面。

我已將它正確地包含在HEAD中，並在此特定樣式表上使用media="print"。

如果一個元素沒有顯示，那麼它的子元素將不會顯示（不管他們的顯示屬性是什麼）。

*匹配<html>元素，因此整個文檔都是隱藏的。

您需要對隱藏的內容更具選擇性。

2009-10-02 20:56:15 Quentin

啊，謝謝！我想我可以將printableArea放在頁面包裝器外面，然後隱藏包裝器，顯示打印格。 – FatherCarbon 2009-10-02 21:10:57

@FatherCarbon - 這就是我剛剛實現的，它看起來好像會訣竅 – Michael12345 2014-03-28 22:08:21

html body * { 
display:none; 
} 

#printableArea { 
display:block; 
}

此外，您可能需要！重要#printableArea，但可能不需要。

2009-10-03 08:33:14 PHLAK

+19

這隻會在#printableArea是身體的直接子節點時才起作用。 – 2010-04-09 04:01:45

如果要使用JavaScript，你可以試試這個簡單的片段，甚至不需要jQuery的：

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

2011-01-18 14:59:18 Chad

此操作將替換整個HTML，而不是必需的結果 – 2013-03-11 14:37:16

你可以嘗試彈出它的一切之上。這解決了我90％的問題，然後我只需要製作一個.noprint類，並將它添加到一些零散的元素中。

.print_area{ 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    z-index: 9999; 

    background-color: #ffffff; 
}

2015-12-09 18:23:49

你採取正確的一般方法，但要使用的visibility: hidden代替display: none，使您可以設置子元素是可見的。

2016-02-02 23:58:59

回答