Question

我正在用Django开发一个应用程序。我有一个HTML页面，需要在其中打印收据。有两个打印按钮，分别为 print_btn 和 print_btn_new （用于使用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代码存在问题，在第二行中，您必须在引号之前使用转义符，

$('.modal').on('onVisible', function(){ // your code here })

我也不认为以这种方式更改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>

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

2 个答案: