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

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. 他使用了闭包，因此只有 1 个样式标签添加到页面中，然后可以引用和更改。
2. 他在 cssPagedMedia 上进行了扩展，以便添加的任何方法都被命名空间。这样，全局命名空间就不会被污染。

这是Class形式的（我觉得更容易理解）：

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