javascript - 如何仅在打印文件中显示 div 的内容？

Question

请看下面我的代码。我在 DIV 中有一个内容，可以在单击“打印”按钮时打印该内容。它工作正常，但我需要将此 div(及其内容)从站点页面中隐藏起来，并且只显示在打印文件中。你有什么建议给我吗？

    function printDiv(printThis) {
         var printContents = document.getElementById(printThis).innerHTML;
         var originalContents = document.body.innerHTML;
         document.body.innerHTML = printContents;
         window.print();
         document.body.innerHTML = originalContents;
    }

<div id="printThis">
    content
    </div>
    <input type="button" onclick="printDiv('printThis')" value="PRINT" />

Answer 1

你可以使用 css @media print

这将隐藏所有正文元素并仅显示 div #printThis 及其所有子元素。

@media print {
    body * {
        visibility: hidden;
    }

    #printThis,  #printThis * {
        visibility: visible;
    }

    #printThis {
        width : 100%;
        height : auto;
        position: absolute;
        left: 0;
        top: 0;
    }
}

js(无需修改/隐藏元素。CSS 会处理它)

function printDiv( printThis ) {
    window.print();
}

HTML:

<div id="printThis">
    content
</div>
<input type="button" onclick="printDiv('printThis')" value="PRINT" />