Question

我开发了一个包含大量打印媒体查询的网站，以便在打印页面时对齐内容。当您在Web浏览器上进入打印模式时，查询效果很好。但我想在常规网页上应用/删除那些@media print查询而无需进入打印模式。（通过点击按钮）有什么办法可以实现这一目标吗？

Answer 1

除了Boldewyn的回答外，如果您在@media print标记中包含<style>个样式，则可以将其替换为@media screen：

Array.prototype.forEach.call(document.getElementsByTagName('style'), function(style) {
    style.innerText = style.innerText.replace(/@media print/gi, '@media screen');
});

请参见demo。

Answer 2

添加到yezzz的答案：如果您在HTML中链接了打印CSS，如

<link rel="stylesheet" media="print" href="...">

您可以删除media属性，以便在服务器或Javascript上随处启用这些样式：

document.querySelector('[media="print"]').removeAttribute('media');

请注意，如果打印样式表中的语句包含在@media print {}规则中，则不起作用。

Answer 3

首先想到的是使用类。简单的例子，给你一般的想法。如果您有一个按钮可以在身体上切换emulateprint类，您可以使用例如。这个css：

body {
  color: black;
}
body.emulateprint {
  /* put same styles as @media print in here */
  color: red;
}

@media print {
  body {
    color:red;
  }
}

有没有办法让媒体打印CSS到普通视图？

3 个答案: