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

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

@page {
   size: landscape;
}

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

---

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

一种简单的方法是为@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');

---

@贾斯桑佩特的回答救了我一命。尽管如此，我还是把它改简单了一点（在我看来）

**不太清楚为什么会这样做，但是如果你知道的话，请告诉我。如果只是偏好，那么我将分享我的代码示例，因为其他人的偏好可能更符合我的偏好

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

---

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

他使用闭包，这样页面上只添加了一个样式标记，可以引用和更改

他对cssPagedMedia进行了扩展，以便添加的任何方法都具有名称空间。这样，全局名称空间就不会受到污染 以下是课堂形式（我觉得更容易理解）：

---

@J-16SDiZ的可能复制品：我不这么认为；我看了一下这个问题，没有看到任何关于动态更改设置的内容。@BNL:没有太多；我花了一些时间在DOM中查找可以访问此属性的位置，但找不到任何内容。我曾考虑过改变样式表本身，模糊地按照Jassonpet的回答，但那在当时对我来说似乎是有问题的。我通常会等几天把某个东西标记为正确的，以防其他人有更多的见解，但这是一个很好的、明智的方法，而且很有效；谢谢。当我从CSSjassonpet中删除

@page

声明时，它对我很有效。它的技术在页面标题中创建一个样式元素，并返回一个更新其值的函数。每次执行时，您的技术都会将一个新的样式元素附加到页眉。这两种方法都应该有效（最近附加的CSS规则将始终覆盖早期的规则），但另一种技术会减少规则污染，并使完全替换现有规则变得更容易，因此不需要附加相互矛盾的规则。

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 + "}");
  }
}