防止引導'隱藏打印'繼承（又名覆蓋隱藏打印）

我有一個很大的HTML頁面，hidden-print類聲明某處靠近頂部，但它有一個窗口（絕對定位），需要打印。防止引導'隱藏打印'繼承（又名覆蓋隱藏打印）

問題：是否可以強制打印從父母hidden-print樹下的元素？

因爲HTML是動態生成的，所以對單個元素應用隱藏打印並不是一個選項，我無法控制父類型。

我的HTML（簡化爲清楚起見）：

<div> 
    <div class="hidden-print"> 
    <div>This should not be visible while printing</div> 
    <div>This should not be visible either</div> 
    <div class="do-print">This SHOULD be visible</div> 
    </div> 
</div>

CSS：

@media print { 
    .do-print { 
    display:block !important; 
    visibility:visible !important; 
    opacity:1 !important; 
    position:absolute; 
    z-index:1; 
    } 
}

jsFiddle

來源

2017-09-28 andrei

如果通過「display：none」或「visibility：hidden」隱藏父元素，則無法顯示該元素的子元素。如果我明白你在問什麼，那麼就不可能隱藏父母，而是向孩子展示。 – Zak

這是不可能做的，由於使用display:none爲了自舉隱藏打印元素。您不能在未顯示的元素內顯示子元素。

然而，你正在試圖實現可能如果你創建自己的自定義功能來處理這個效果。您可以使用visibility: hidden和visibility: visible而不是，因爲元素可以在不可見的父級內部可見。

區別在於這種方式display:none有效;它實際上移除從DOM元素：

[...]的值沒有讓你關閉的元素的顯示;當你使用none時，所有的後代元素也都會關閉它們的顯示。該文檔呈現爲文檔樹中不存在該元素。

如果父元素被刪除，子元素也被刪除。相反，visibility: hidden只是隱藏的元素;它在DOM中仍然可見：

可見性CSS屬性可以在不影響文檔佈局的情況下顯示或隱藏元素（即爲元素創建空間，而不管它們是否可見）。

因此，你可以爲了顯示它添加到樣式子元素：

@media print { 
 
    .no-print { 
 
    visibility: hidden !important; 
 
    } 
 
    .do-print { 
 
    visibility: visible !important; 
 
    } 
 
}

<div> 
 
    <div class="no-print"> 
 
    <div>This should not be visible while printing</div> 
 
    <div>This should not be visible either</div> 
 
    <div class="do-print">This SHOULD be visible</div> 
 
    </div> 
 
</div>

我還創建了一個小提琴展示這種here。

注意，利用的visibility: hidden將它在哪裏由於包含隱藏的內容的元素位置。如果您想重新定位元素以適應現在不可見的元素，則需要調整媒體查詢中的定位。

希望這會有所幫助！ :)

來源

2017-09-28 21:59:43

這是一個好主意，除了它留下隱藏內容所在的空白空間。我想我可以爲no-print創建一個SCSS規則，它可以將'display：none'僅應用於沒有'do-print'類的孩子 – andrei

有趣的一點。是的，默認情況下，元素將出現在包含隱藏內容的位置。如果您想將其移動，建議您調整媒體查詢中可見元素的位置。我會更新我的答案來說明這一點。 –

防止引導'隱藏打印'繼承（又名覆蓋隱藏打印）

回答

相關問題