Question

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

@page {
   size: landscape;
}

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

这可以很好地作为CSS中的静态值，但我想在纵向和＆amp;之间动态切换。基于用户选择的景观。是否可以使用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');

Answer 2

@jasssonpet用他的回答救了我。话虽如此，我将其更改为更简单一些（在我看来）。

**不太确定为什么要按原样进行，但是如果您知道，请教育我。如果仅是首选项，那么我将共享我的代码示例，因为其他人的首选项可能更适合我。

// just create the style tag and set the page size
function setPageSize(cssPageSize) {
    const style = document.createElement('style');
    style.innerHTML = `@page {size: ${cssPageSize}}`;
    document.head.appendChild(style);
}

// how to use it
setPageSize('letter landscape');

JavaScript可以改变@page CSS的值吗？

2 个答案: