How to dynamically load a CSS file
Question
In my .css file I use the print media type to define the layout of the page when printed. However for one of my projects I'm facing a problem where certain printers cannot deal with images, borders, opacity, etc. This means I have to implement 2 printing layouts. One that would allow the normal printing scenario and the other one that would only allow the printing of plain text.
I'm considering implementing a drop down for the user to decide when to print. I was just wondering how to 'overload' the @media print or how to dynamically load a css file that defines this markup.
If possible this would have to be achieved in Javascript.
2 answers
solution1
0 2015-12-10 14:13:42
You don't need to overload that. Instead use an id for the <link /> :
<link rel="stylesheet" href="print.css" media="print" id="printCss" />
And you need to trigger the old printer. So you need to have a button, say Old and it should switch it:
<button onclick="switch()">Old</button>
And now the JavaScript part:
function switch() {
document.getElementById("printCss").setAttribute("href", "print-old.css");
}
This would load the old CSS. Also, you don't need to use extra <link /> tags.
solution2
-2 2015-12-10 14:11:03
i'll try help you. So, let's show you a simple example that will allow you to choose the color of the printed page text according to the button we press.
Page example:
<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>
Nothing fancy here, we're just loading jquery and adding some styles that hide buttons on the printed page while coloring them on the screen.
Now the body of page is:
<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>
Here we have the page content, the buttons and an empty style tag that specifically targets print media, which is left empty and will be populated with our custom styles at runtime.
Javascript code is:
$(function() {
var buttons = $('button');
var printStyle = $('#print');
var style;
buttons.click(function() {
style = 'p { color: ' + $(this).attr('class') + '};';
printStyle.text(style);
window.print();
});
});
When we click one of the buttons the code finds the color we want, it fills the empty style tag with the custom styles and then will open the browser integrated print interface.
An example can find here:
See you soon! Markus
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.