有没有一种方法可以将媒体打印css启用为普通视图

Is there a way to enable media print css to a normal view?

本文关键字：css 打印 媒体 启用 视图 一种 方法 有没有      更新时间：2023-09-26

我开发了一个网站，其中包含一堆打印媒体查询，以便在打印页面时对齐内容。当您在web浏览器上进入打印模式时，查询效果非常好。但我希望在常规网页上应用/删除那些CCD_ 1查询，而不必进入打印模式。（点击按钮）有什么方法可以实现这一点吗？

除了Boldewyn的答案外，如果<style>标签中有@media print样式，则可以用@media screen:替换它们

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

请参阅演示。

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

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

您可以删除media属性，以便在服务器上或使用Javascript:在任何地方启用这些样式

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

请注意，如果打印样式表中的语句被封装在@media print {}规则中，那么这是不起作用的。

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

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