javascript - JavaScript 可以更改@page CSS 的值吗？

Question

以下 CSS 会影响页面在默认情况下是纵向打印还是横向打印。

@page {
   size: landscape;
}

我意识到这只适用于非常有限的一组浏览器，并且用户可以覆盖它。没关系;我只是想提供一个好的默认值。

这在 CSS 中作为静态值工作得很好，但我想根据用户的选择在纵向和横向之间动态切换。是否可以使用 JavaScript 更改此值？

Answer 1

一种简单的方法是为@page 创建一个单独的样式并更改它:

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