两个具有不同 css 样式的打印按钮

Question

我正在 Django 中开发一个应用程序。 我有一个 HTML 页面，我需要在其中打印收据。 有 2 个打印按钮，分别是print_btn和print_btn_new （用于使用 2 种不同的样式）。 我已经定义了2个样式表说，print.css和print_new.css。

在头部部分

<link rel="stylesheet" href="{% static 'css/print.css' %}" id="printCss" media="print">

它工作正常。 但是当点击 print_btn_new 时，打印出来的效果就像没有应用 CSS 一样。

对于print_btn_new

<button id="print_btn_new" onclick="printNewOnClicked();" name="button">Print New</button>

printNewOnClicked()函数：

function printNewOnClicked(){
        document.getElementById('printCss').href = '{% static 'css/print_new.css' %}';
        alert(document.getElementById('printCss').href);
        window.print();
    }

警报显示 print_new.css 的有效 URL。 当我将 URL 表单警告框复制粘贴到地址栏时，它显示了正确的文件。

Answer 1

您粘贴的js代码有问题，在第二行中您必须在引号前使用转义符，如下所示：

document.getElementById('printCss').href = '{% static \\'css/print_new.css\\' %}';

而且我认为以这种方式更改 href 不会在不重新加载的情况下实际更改页面中的 css 样式。

Answer 2

如果您在 HTML 标签上设置 (a) 个类，您可以为任意数量的不同规则集创建单独的 CSS 规则。 用普通的 CSS 编写这些会变得非常乏味，LESS/SASS 和类似的东西可以减少冗余和费力。 在下面的代码片段中，HTML 标记也可以出于其他原因保留类，因为其他人也可以使用这种技术！

 var _global_printCSSnames = [ 'funky' ]; function printPage(mode){ let doc = document.querySelector('html'); //doc.className = mode !== null ? `${mode}-printstyle` : ''; // just for our print css switch _global_printCSSnames.forEach( pmode => { doc.classList.remove( `${pmode}-printstyle` ) } ); if(mode!==null) doc.classList.add( `${mode}-printstyle` ); // if other classes may be set on HTML tag window.print(); }

 html,body{ background-color: #444; color: #fff; } @media(min-width:50em){ html,body{ background-color: #aaa; color: #444; } } @media(min-width:80em){ html,body{ background-color: #444; color: #fff; } } @media print{ html,body{ background-color: #fff; color: #000; } html.funky-printstyle,html.funky-printstyle body{ background-color: #fff; color: #00f; } } .buttonBox{ display: flex; flex-direction: row; justify-content: space-around; } .buttonBox>*{ flex: 0 1 auto; width: 9em; height: 2em; margin: 4px 8px; } button{ background-color: #333; color: #0f8; border-radius: 4px; border: 2px solid #888; box-shadow: 4px 8px 4px rgba( 128, 128, 128, .5 ); transition: all ease-in-out .3s; } button:hover{ background-color: #555; color: #0ff; text-shadow: 1px 1px 0 1px #000, -1px -1px 0 1px #fff; cursor: pointer; }

 <h1>Lorem ipsum…</h1> <p>Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. </p> <p>Heizölrückstoßabdämpfung. Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben, Joghurt und Quark. "Fix, Schwyz!" quäkt Jürgen blöd vom Paß. Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich. Falsches Üben von Xylophonmusik quält jeden größeren Zwerg. </p> <div class="buttonBox"> <button onclick="printPage(null)">print (regular)</button> <button onclick="printPage('funky')">print (funky)</button> </div>