Changing media specific CSS properties from Javascript

Question

I have a CSS property (font) that I need to be able to change from Javascript (a pulldown). However, this font should only be used when printing (@media print).

So, the javascript can't just change the value of the font, because that will effect the screen view as well. Is there a way to change ONLY the print version of the font property?

Alternatively is there a way to have a CSS property be a reference to another property?

That way, in the print CSS, I could say font:printfont, and in the screen CSS font:12. And then change the value of printfont, and it would only change the font when printing.

thanks.

EDIT: The point is that I need to be able to change the font size that the document gets printed at from the pulldown, but I don't want to change the font size that the document gets displayed at.

Answer 1

seems like what you want to do is myabe just change or add a class to the item with JS

<p class="inrto comicSans">this is the text to change</p>

@screen p.intro {font-family:verdana;}

@print p.comicSans {font-family:comic-sans;}

Answer 2

That's an interesting dilemma you have going on there. Off the top of my head, the only thing I can think of is to add a new tag to the header where your font-size is declared with !important. For example, in your head tags:

<style type="text/css" media="print">

.printfont {
    font-size: 16px !important;
}

</style>

This will ensure that the new font-size will take precedence.

The following is a very quick example of how you may accomplish this with javascript

<script type="text/javascript">

    var inlineMediaStyle = null;

    function changeMediaStyle ()
    {
     var head = document.getElementsByTagName('head')[0];
     var newStyle = document.createElement('style');
     newStyle.setAttribute('type', 'text/css');
     newStyle.setAttribute('media', 'print');
     newStyle.appendChild(document.createTextNode('.printFont { font-size: 16px !important;}'));

     if (inlineMediaStyle != null)
     {
      head.replaceChild(newStyle, inlineMediaStyle)
     }
     else
     {
      head.appendChild(newStyle);
     }
     inlineMediaStyle = newStyle;
    }

</script>

Just ensure that you have onchange="changeMediaStyle()" as an attribute on your dropdown. Also, as a disclaimer in my example, I am not accounting for things like memory leaks, so you will have to work out those kind of issues on your own.

As to your alternate question, as far as I am aware, there isn't any method for declaring/using what is essentially CSS variables. However, there is currently a recommendation out there for it: http://disruptive-innovations.com/zoo/cssvariables/

Answer 3

You could just use JavaScript to switch classes, and have the

@print {
  .myPrintClass { font-family: serif; }
}
@screen {
  .defaultClass { font-family: sans-serif; }
}

Answer 4

While the class-based solutions would totally work, you could also use Javascript to dynamically add a new <link> tag to the page. For instance, if you have:

stylesheet1.css:

@print * {font-family:verdana;}

stylesheet2.css:

@print * {font-family:comicSans;}

You could then use jQuery to do something like:

$(document.body).append("<link href='stylesheet2.css'/>");

(you could do it without jQuery too, but I forget that syntax and am too lazy to look it up ;-)).

However, if you're only changing small amounts, a single stylesheet + different classes is probably the better way to go; the new <link> tag solution is only worthwhile if you have a bunch of different style changes happening.