69

em測定値の正確なピクセル幅を取得すると便利な場合があります。たとえば、ems で測定される CSS プロパティ (border や padding など) を持つ要素があり、border や padding の正確なピクセル幅を取得する必要があるとします。このトピックに触れる既存の質問があります：

JavaScriptまたはJQueryを使用してデフォルトのフォントサイズをピクセル単位で取得するにはどうすればよいですか?

この質問は、相対値を正確な値に変換するために必要なデフォルトのフォントサイズを取得することについて尋ねています。 empx

この回答には、要素のデフォルトのフォントサイズを取得する方法についてのかなり良い説明があります:

ems は幅を測定するので、1000 ems の長さの div を作成し、その client-Width プロパティを 1000 で割ることによって、正確なピクセル フォント サイズをいつでも計算できます。ピクセル結果の誤った切り捨てを回避します。

したがって、この回答をガイドとして使用して、デフォルトのフォントサイズを取得する次の関数を作成しました。

function getDefaultFontSize(parentElement)
{
    parentElement = parentElement || document.body;
    var div = document.createElement('div');
    div.style.width = "1000em";
    parentElement.appendChild(div);
    var pixels = div.offsetWidth / 1000;
    parentElement.removeChild(div);
    return pixels;
}

デフォルトのフォント サイズを取得したら、要素のデフォルトのフォント サイズで ems を乗算し、結果を丸めるだけで、任意のem幅を幅に変換できます。px

Math.round(ems * getDefaultFontSize(element.parentNode))

問題:はgetDefaultFontSize、デフォルトのフォント サイズを返す単純で副作用のない関数であることが理想的です。しかし、残念な副作用があります: DOM を変更します! 子を追加してから削除します。有効なoffsetWidthプロパティを取得するには、子を追加する必要があります。div子を DOM に追加しない場合offsetWidth、要素がレンダリングされないため、プロパティは 0 のままです。子要素をすぐに削除しても、この関数は、親要素でリッスンしていたイベント (Internet Exploreronpropertychangeや W3C のイベントなど) を発生させるなど、意図しない副作用を引き起こす可能性があります。DOMSubtreeModified

質問:getDefaultFontSize()誤ってイベント ハンドラーを起動したり、その他の意図しない副作用を引き起こしたりしない、真に副作用のない関数を作成する方法はありますか?

4

6 に答える 6

46

編集：いいえ、ありません。

DOM に影響を与えずに、特定の要素のレンダリングされたフォント サイズを取得するには:

parseFloat(getComputedStyle(parentElement).fontSize);

これは、この質問に対する回答に基づいています。

編集：

IE では を使用する必要がありますがparentElement.currentStyle["fontSize"]、これはサイズを に変換する保証はありませんpx。それで終わりです。

さらに、このスニペットは要素のデフォルトのフォント サイズを取得するのではなく、実際のフォント サイズを取得します。これは、実際にクラスとそれに関連付けられたスタイルを取得している場合に重要です。つまり、要素のフォント サイズが の場合2em、2 ems のピクセル数を取得します。インラインでフォントサイズを指定しないと、変換比率がうまくいきません。

于 2012-05-05T21:05:06.380 に答える
10

もっと良い答えがあります。私のコードは、( JavaScript 変数の1emCSS ピクセル単位で)の長さを格納します。pxem

  1. これdivを HTML コードの任意の場所に配置します

    <div id="div" style="height:0;width:0;outline:none;border:none;padding:none;margin:none;box-sizing:content-box;"></div>

  2. この関数を JavaScript ファイルに配置します

    var em;
function getValue(id){
    var div = document.getElementById(id);
    div.style.height = '1em';
    return ( em = div.offsetHeight );
}

これで、パラメーターにそのテスト div の id を指定してこの関数を呼び出すときはいつでも、px に 1 em の値を含む'getValue'変数名が得られます。em

于 2016-09-03T12:57:42.070 に答える
3

すばやく汚いものが必要な場合 (要素ではなく、本文のベース フォント サイズに基づく)、次のようにします。

Number(getComputedStyle(document.body,null).fontSize.replace(/[^\d]/g, ''))

 Number(  // Casts numeric strings to number
   getComputedStyle(  // takes element and returns CSSStyleDeclaration object
     document.body,null) // use document.body to get first "styled" element
         .fontSize  // get fontSize property
          .replace(/[^\d]/g, '')  // simple regex that will strip out non-numbers
 ) // returns number
于 2012-05-05T21:40:08.013 に答える