Can JavaScript change the value of @page CSS?

Question

The following CSS affects whether a page prints in portrait or landscape by default.

@page {    size: landscape; } 

I realize that this only works on a very limited set of browsers, and that the user can override it. That's okay; I'm just trying to provide a good default.

This works fine as a static value in CSS, but I'd like to switch dynamically between portrait & landscape based on on user choices. Is it possible to use JavaScript to change this value?

Answer 1

One simple way is to create a separate style for @page and change it:

var cssPagedMedia = (function () {     var style = document.createElement('style');     document.head.appendChild(style);     return function (rule) {         style.innerHTML = rule;     }; }());  cssPagedMedia.size = function (size) {     cssPagedMedia('@page {size: ' + size + '}'); };  cssPagedMedia.size('landscape');