仅在打印页面上可见的元素

Question

我遇到了一些问题，希望在打印页面上仅显示某些元素。 例如，我有一个页面，用户可以查看打印预览（使用简单的 JavaScript 实现）。 在该打印页面上，我仅显示页面中的某些元素（而不是全部元素），使用以下代码：

@media print {
  .noPrint {
      display:none;
  }
}

现在当我将 .noPrint 应用于一个元素时，它将不会在打印页面中显示。 但是，如何创建一个例如div，在页面上能够在“打印页面”中显示但在普通页面上不显示。

这样做是否足够，并且被大多数浏览器支持？

@media screen, projection, tv {


 .dontShowThis {
    display:none
  }
}

现在，如果我想在打印页面上显示元素，但不在常规页面上显示，我会这样做

<div class="dontShowThis printIt">Some content goes here</div>

谢谢

- cool

Answer 1

我之前做过类似的事情，这是我当时的做法：

@media screen
{
    .noPrint{}
    .noScreen{display:none;}
}

@media print
{
    .noPrint{display:none;}
    .noScreen{}
}

<div class="noScreen">Some content goes here</div>

据我所知，所有主流浏览器都支持此功能，甚至包括IE8。

- Radu Maris