javascript - jqueryを使用してセンチメートルでdivの高さを取得しますか？

Question

データを動的に追加するdivがあり、特定のdivの高さをセンチメートルで取得したいと思います。高さに基づいてそのdivに表示できるデータの量を制御する必要があるためです。

Answer 1

1px = 0.02645833 cm;

また

1 cm = 37.795276px;

これらのリンクを参照してください。

JavaScriptを介して画面表示のDPI設定にアクセスするにはどうすればよいですか？

JavaScriptを使用して画面のDPIを検出する方法

ピクセルからセンチメートル？

Answer 2

CSSピクセルをセンチメートルに変換する小さなJavaScript関数を次に示します。

function px2cm(px) {
  var d = $("<div/>").css({ position: 'absolute', top : '-1000cm', left : '-1000cm', height : '1000cm', width : '1000cm' }).appendTo('body');
  var px_per_cm = d.height() / 1000;
  d.remove();
  return px / px_per_cm;
}

1000cm x 1000cmの空<div>をページに挿入し、その高さをCSSピクセルで読み取ります。マジック値を使用しないことにより（上記で提案されている1px = 0.02645833 cmであり、画面のDPIが96の場合にのみ機能します）、現在の画面のDPIが考慮されます。

画面のDPIは決して変更できないため、px_per_cmこの関数を呼び出すたびにパフォーマンスが低下しないように、をキャッシュする必要があります。

Answer 3

まず、表示しているDPI（Dots Per Inch）の数を決定する必要があります。画面上では、これは通常72から100の間です。例として72を取り上げましょう。

1インチあたり72ドット（ピクセル）。
これは2.54cmあたり72ピクセルな
ので、1cmは28.35 ピクセルです。

次に、高さをピクセル単位で取得し、変換を実行します。