[分享]css只打印一个div

CSS可以帮助我们自定义打印网页的样式，而只打印一个div元素也并不困难。在正式开始代码编写前，需要先准备好需要打印的div元素和打印时需要隐藏的元素，例如header、footer等。可以通过设置c...

CSS可以帮助我们自定义打印网页的样式，而只打印一个div元素也并不困难。

在正式开始代码编写前，需要先准备好需要打印的div元素和打印时需要隐藏的元素，例如header、footer等。可以通过设置class名或id名来实现样式的区分。

  /* 隐藏不需要打印的元素 */
        @media print {
            .no-print {
                display: none;
            }
        } 

接下来，在CSS中定义打印时需要显示的元素。

  /* 只打印需要的元素 */
        @media print {
            .print {
                display: block;
            }
        } 

注意，需要在@media print中定义样式，这样样式才会在打印时生效。在上述代码中，.print类名的元素将会被显示出来，而其他元素则会被隐藏。

最后，我们需要通过JavaScript来触发打印事件。

  // 触发打印事件
        function printDiv() {
            window.print();
        } 

在需要打印的元素上添加类名print，在需要隐藏的元素上添加类名no-print。在需要触发打印事件的元素上添加onclick事件，调用printDiv()函数即可。

通过以上代码，就能够实现只打印一个div元素的效果。