Javascript set print stylesheet

Question

How would I modify the style of an object for the print stylesheet? I'm using jQuery, if that's of any help.

I basically want to set a css property of an object, but have that property apply for print only, not screen. e.g. $('#myobject').css('background','white','print');

Your question is quite unclear. Please post enough of your code so we can tell what you're actually trying to do. — Mark Eirich, Mar 19 '11 at 03:58

score 5 · Accepted Answer · answered Mar 19 '11 at 04:12

5

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

If so, you can try adding styles to the head, like the following:

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

answered Mar 19 '11 at 04:12

Paul Sham

3,185
2
24
31

If trying to achieve this dynamically, this would be the way to go. If you are using Jquery because you didn't know another way, see my answer below. – Joel Friedlaender Mar 19 '11 at 04:23
Based on your code sample, it seems like you can just set #myobject to have a white background in a print specific stylesheet in the head, like `` I'm just trying to make sure you're not using unnecessary javascript to accomplish something you can do with css. – Paul Sham Mar 19 '11 at 04:37

score 2 · Answer 2 · answered Mar 19 '11 at 04:16

2

You are going to need to add a CSSStyleSheet to document.styleSheets and set the media type to print. https://developer.mozilla.org/en/DOM/stylesheet

answered Mar 19 '11 at 04:16

HChen

2,141
13
12

score 0 · Answer 3 · answered Mar 19 '11 at 04:08

I think the only way to do this is set a special ID or class on the element, then define a style for that in your 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>

score 0 · Answer 4 · answered Mar 19 '11 at 04:20

Create a print css file in your application like this:

Filename: print.css

#myobject {
background-color: white;
}

In your application header, include the file like this:

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

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

Javascript set print stylesheet

4 Answers4

Linked