Geek asks and answers

Javascript Print Style Sheet

How to change the style of an object for a print style sheet? I am using jQuery if this helps.

Basically I want to set the css property for an object, but this property applies only to print, not to screen. eg$('#myobject').css('background','white','print');

+3
source share
4 answers

This question is a bit vague, so I'm not sure if you are following what you are trying to do. Are you trying to dynamically modify the style of an object for printing?

If so, you can try adding styles to the head, for example:

$('head').append('<style type="text/css" media="print">Whatever styles</style>');
+3
source

You need to add CSSStyleSheetin document.styleSheetsand set for mediatype print. https://developer.mozilla.org/en/DOM/stylesheet

+1

I think the only way to do this is to set a special identifier or class in the element and then define the style for this in the print stylesheet:

<html><head>
    <style type="text/css" media="print">
    .print_blue { color: blue; }
    </style>
</head><body>

<span id="to_change">This is black text.</span>
<a href="#" onclick="jQuery('#to_change').addClass('print_blue');return false">Click here</a>
to change it to blue for printing.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</body></html>
0
source

Create a css file to print in the application as follows:

File name: print.css

#myobject {
background-color: white;
}

In the application header, include the file as follows:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Pay attention to media = "print" when I included the stylesheet. This will apply your white background to the object only when printing. A.

0
source

More articles:


All Articles