24

次のCSSは、ページがデフォルトで縦向きと横向きのどちらで印刷されるかに影響します。

@page {
   size: landscape;
}

これは非常に限られたブラウザのセットでのみ機能し、ユーザーはそれを上書きできることを理解しています。大丈夫; 私はちょうど良いデフォルトを提供しようとしています。

これはCSSの静的な値としては問題なく機能しますが、ユーザーの選択に基づいて縦向きと横向きを動的に切り替えたいと思います。JavaScriptを使用してこの値を変更することは可能ですか？

4

2 に答える 2

35

簡単な方法の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');
于 2012-06-22T17:48:51.583 に答える
1

@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の答えを見ましたが、今ではもっと理にかなっています。他の誰かが混乱している場合、彼のアプローチの主な利点は2つのことです。

  1. 彼はクロージャを利用して、参照および変更できるスタイルタグがページに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 + "}");
  }
}
于 2019-02-19T21:49:34.457 に答える