CODEWITHSUNDEEP
javascriptcss
bertassa
bertassa

Reputation: 685

Selecting different stylesheet depending on the button pressed

I want the user to be able to print a document with or without some information included in a a div. I have 2 stylesheets and one of them specifies the style of the class of the div I want to hide when printing: .hide { display: none; }

The following is the script that selects the stylesheet depending on the parameter passed:

function print(o) {
  var head = document.getElementsByTagName('head')[0].innerHTML;
  if (o == 'withinfo') {
    head += '<link rel="stylesheet" href="printwithinfo.css" media="print" />';
 }
 if (o == 'withoutinfo') {
    head += '<link rel="stylesheet" href="printwithoutinfo.css" media="print" />';
 }
 document.getElementsByTagName('head')[0].innerHTML = head;
 }

Then in my html I have the following:

   <div class="hide">My Info</div>

And my two buttons are the following:

   <input type="button" value="Print with info" onclick="print('withinfo');">

   <input type="button" value="Print without info" onclick="print('withoutinfo');">

Unfortunately nothing happens, when I click either of the buttons. Could you please let me know what I am doing wrong?

Upvotes: 1

Views: 833

Answers (2)

Jacob T. Nielsen
Jacob T. Nielsen

Reputation: 2978

It seems to work just fine.

you have to be aware the only thing happening when you click either button is that the stylesheet gets appended to the head. Since the stylesheet only works for media="print" it will only be applied when print is activated either by the user or you.

If you want to activate it you can do this.

<input type="button" value="Print with info" onclick="print('withinfo');window.print();"></input>
<input type="button" value="Print without info" onclick="print('withoutinfo');window.print();"></input>

If you simply want to test the stylesheet being applied, you can remove the (media="print") part of your link tags. This limits the stylesheet to being applied only in "print".

note: your print function should change name since it overwrites window.print.

A better option

Just use 1 stylesheet "print.css" which is loaded from the start and never changes.

then alter print to this

function print(o) {
    document.getElementById("body").className = o;
}

and in your stylesheet have the following

body.withinfo #hide {
    display: block;
}

body.withoutinfo #hide {
    display: none;
}

This way you do not have to unloade previous stylesheets and the only thing that changes is the class on the body element.

Upvotes: 1

kante
kante

Reputation: 229

First of all I highly recommmend you to change your func name coz print() is reserved in Javascript.

Then to me your code seemd to work fine, try this:

<!doctype html>
<html>
<head></head>


<body>
    <script>
        function Myprint(o) {
            var head = document.getElementsByTagName('head')[0].innerHTML;
            if (o == 'withinfo') {
              head += '<link rel="stylesheet" href="b.css" media="print" />';
           }
           if (o == 'withoutinfo') {
              head += '<link rel="stylesheet" href="a.css" media="print" />';
           }
           document.getElementsByTagName('head')[0].innerHTML = head;
           window.print();
}
    </script>
       <div id="hide">My Info</div>  
       Always here
    <input type="button" value="Print with info" onclick="Myprint('withinfo');" />
    <input type="button" value="Print without info" onclick="Myprint('withoutinfo');" />
</body>
</html>

With a.css:

div{display:none;}

And b.css:

div{display:block;}

Upvotes: 2

Related Questions