如何動態加載CSS文件

在我的.css文件中，我使用打印介質類型來定義打印時頁面的佈局。但是對於我的一個項目，我遇到了某些打印機無法處理圖像，邊框，不透明等問題。這意味着我必須實施2個打印佈局。一種可以允許正常打印的場景，另一種只允許打印純文本。如何動態加載CSS文件

我正在考慮爲用戶決定何時打印下拉菜單。我只是想知道如何'重載'@media print或者如何動態加載定義這個標記的css文件。

如果可能，這將必須在Javascript中實現。

來源

2015-12-10 Redesign1991

-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

再見！ Markus

來源

2015-12-10 14:11:03

你不需要重載那個。相反，使用id爲<link />：

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

而且你需要觸發舊打印機。所以，你需要有一個按鈕，說老，它應該打開它：

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

而現在的JavaScript部分：

這將加載舊CSS。另外，您無需使用額外的<link />標籤。

來源

2015-12-10 14:13:42

如何動態加載CSS文件

回答

相關問題