Javascript 如何隐藏内容但仍使其可打印？

我有一个元素（

#print content

），我正在使用这个jQuery插件打印它：

我不希望此元素显示在实际页面中，但我希望它显示在打印版本中

---

我可以使用什么CSS属性使它仍然显示在打印版本中？可能是

height:0

或

position absolute 0

？“

AFAIK，您不能使用特定的CSS属性来控制是否打印元素，但可以使用CSS媒体查询：

@media screen {
    #print-content {
        display: none;
    }
}

当页面显示在屏幕上时，这将阻止元素呈现，但当它被打印时，它将根据CSS规则的其余部分正常处理它

---

如果想要相反的效果（打印时隐藏，但在屏幕上显示），可以使用以下方法：

@media print {
    #print-content {
        display: none;
    }
}

---

有关CSS@media查询的更多信息，请参阅

#print-content {
    display: none; /*** Remove from the body ***/
}

@media print {
    #print-content {
        display: block; /*** Show just in print ***/
    }
}

---

---

仅供参考，默认情况下使用

display:none；

隐藏内容，然后使用

display:block；

在媒体查询中显示内容是不好的做法。这是基于元素的显示类型为

block

，但它可能是任何其他类型，例如

inline

，

inline block

，等等。它也使用两个规则而不是一个。

您可以只使用媒体查询

#print-content {
    display: none; /*** Remove from the body ***/
}

@media print {
    #print-content {
        display: block; /*** Show just in print ***/
    }
}

---

一种可能性是使用CSS以不干扰布局的方式隐藏元素

CSS:

不应显示元素及其子元素，子元素仍应打印。有关显示属性的详细信息：

另一个解决方案（Andreas Grech在下面的帖子中）是使用单独的样式表：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

在打印样式表中，@media print{}将用于定义应打印的内容。

尝试使用

.clone（）

，

.attr（）

，

window.open（）

，

.outerHTML

html

js

---

jsfiddle

你在这个插件上使用了append吗？简短而完美的答案。

<pre id="print-content"> (<span class="light">highlighted</span> portion) </pre>
<div>abc 123</div>
<button id="save">Print</button>

.light {
    color:#0af;
}
#print-content {
    display:none;
}

$("#save").click(function () {
    var text = $("body").clone();
    text.find("#print-content").attr("style", "display:block");
    text.find("#save, script").remove();
    var styles = $("style")[0].outerHTML;
    var popup = window.open("", "popup");
    popup.document.body.innerHTML = text[0].outerHTML + styles;
    popup.focus();
    popup.print();
});