Question

在我的.css文件中，我使用打印介质类型来定义打印时页面的布局。但是对于我的一个项目，我遇到的问题是某些打印机无法处理图像，边框，不透明度等。这意味着我必须实现2个打印布局。一个允许正常打印场景，另一个允许打印纯文本。

我正在考虑为用户实施下拉菜单以决定何时打印。我只是想知道如何“重载”@media打印或如何动态加载定义此标记的css文件。

如果可能，这必须在Javascript中实现。

Answer 1

你不需要超载。而是使用id代替<link />：

<link rel="stylesheet" href="print.css" media="print" id="printCss" />

您需要触发旧打印机。所以你需要一个按钮，比如 Old ，它应该切换它：

<button onclick="switch()">Old</button>

现在是JavaScript部分：

function switch() {
  document.getElementById("printCss").setAttribute("href", "print-old.css");
}

这将加载旧的CSS。此外，您不需要使用额外的<link />代码。

Answer 2

我会尽力帮助你。所以，让我们向您展示一个简单的示例，它允许您根据我们按下的按钮选择打印页面文本的颜色。

页面示例：

 <head>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js"></script>
  <style type="text/css">
    @media print {
      button {
        display: none;
      }
    }
    @media screen {
      .black{
        color: black;
      }
      .blue{
        color: blue;
      }
    }
  </style>
</head>

这里没什么好看的，我们只是加载jquery并添加一些样式来隐藏打印页面上的按钮，同时在屏幕上着色。

现在页面正文是：

<body>
  <p>www.stackoverflow.com</p>
  <button class="black">print this page in black</button>
  <button class="blue">print this page in blue</button>
  <style type="text/css" media="print" id="print"></style>
</body>

这里我们有页面内容，按钮和专门针对打印媒体的空样式标签，这些标签留空，将在运行时填充我们的自定义样式。

Javascript代码是：

$(function() {
  var buttons     = $('button');
  var printStyle  = $('#print');
  var style;

  buttons.click(function() {
    style = 'p { color: ' + $(this).attr('class') + '};';
    printStyle.text(style);
    window.print();
  });
});

当我们点击其中一个按钮时，代码会找到我们想要的颜色，它会使用自定义样式填充空样式标记，然后打开浏览器集成的打印界面。

一个例子可以在这里找到：

Example print colors

很快见到你！马库斯

如何动态加载CSS文件

2 个答案: