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

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

编辑:我有一段时间第一次登录了，看到了@jasssonpet的答案，现在对我来说更有意义了。如果其他人感到困惑，他的方法的主要好处是两件事：

1. 他使用闭包，这样只有一个样式标签添加到页面中，然后可以被引用和更改。
2. 他在cssPagedMedia上进行了扩展，这样添加的任何方法都是命名空间的。这样，全局名称空间就不会受到污染。

下面是类的形式(我觉得它更容易理解)：

class SingletonStyle {
  constructor() {
    this.style = document.createElement("style");
    document.head.appendChild(this.style);
  }

  apply(rule) {
    this.style.innerHTML = rule;
  }

  size(size) {
    this.apply("@page {size: " + size + "}");
  }
}