How do I offer 2 print options?

I know the javascript window.print() works when you want to print a webpage, but I have a c开发者_开发知识库lient who requires two options.

1. Click a link to print in colour
2. Print in black and white.

I know this can be done with a print stylesheet where you can set divs as display:none etc, but I'm not sure how to trigger each option when clicked. Does this require some javascript?

I would suggest having two print stylesheets, and then have a pair of radio buttons to choose Colour or Black/White. Change the print stylesheet when the radio button is changed, then just have one Print button that calls print().

I think the easiest way to do this would be primarily with CSS - set up the print stylesheet with color and b/w options that are toggled with a body class, e.g.:

/* default option: color */
h1 { color: #00C; }

/* b/w option */
body.bw h1 { color: #666 }

Then use Javascript to toggle the bw class on the body tag. Tools like jQuery make this very simple, but if you need to do it without a library, try:

// these functions assume you don't already have any
// CSS classes set on the body element

function printBW() {
    document.body.setAttribute('class', 'bw');
    window.print();
}

function printColor() {
    document.body.setAttribute('class', '');
    window.print();
}

and in your HTML:

<a href="javascript:printColor()">Print color</a> |
<a href="javascript:printBW()">Print B/W</a> 

I should note that it's really worthwhile to learn some simple jQuery for this kind of thing - anything involving DOM manipulation gets complicated very fast if you want to support older browsers without using a library.