Kann JavaScript den Wert von @page CSS ändern?

Question

Das folgende CSS beeinflusst, ob eine Seite standardmäßig im Hoch- oder Querformat gedruckt wird.

Ich weiß, dass dies nur mit einem sehr begrenzten Satz von Browsern funktioniert, und dass der Benutzer es überschreiben kann. Das ist okay; Ich versuche nur, einen guten Standard zu liefern.

Dies funktioniert gut als ein statischer Wert in CSS, aber ich würde gerne dynamisch zwischen Porträt & Landschaft basierend auf Benutzerauswahl wechseln. Ist es möglich, JavaScript zu verwenden, um diesen Wert zu ändern?

Answer 1

Eine einfache Möglichkeit ist, einen separaten Stil für @page zu erstellen und ändern Sie es:

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');