Menu
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?
910
CSS variables have access to the DOM, which means that you can change them with JavaScript.
color = "red"; you can apply the style change dynamically. Below is a function that turns an element's colour to red when you pass it the element's id . You could also use setAttribute(key, value) to set a style on an element. For example, you could set the colour of an element to red by calling element.
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'); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
