CSS プロパティ値を元の単位で取得するにはどうすればよいですか?

CSS プロパティ値を元の単位で取得する

要素の CSS プロパティ値を決定するとき、開発者は getComputedStyle や jQuery の css() などのメソッドに依存することがよくあります。ただし、これらのメソッドは値をピクセル単位で返すため、値が元々他の単位 (パーセント、em、px など) で設定されていた場合に問題が発生する可能性があります。ここで疑問が生じます。設定された単位に関係なく、CSS プロパティ値を元の単位で取得するにはどうすればよいでしょうか?

要素のスタイルと順序の重要性

鍵は次のとおりです。要素のスタイルと CSS セレクターの順序を考慮します。要素のスタイルの優先順位が最も高いため、まず要素の style プロパティに値が明示的に設定されているかどうかを確認します。一致する場合は、値とその優先順位を取得します。

次に、getMatchedCSSRules を使用して、一致した CSS ルールを調べます。これらのルールは優先度順 (最も高いものから最後) に並べられ、逆方向に反復処理されます。いずれかのルールに null 以外の優先度が設定されている場合は、その値が更新されます。ただし、ルールに重要な優先度がある場合は、すぐに値を返します。

コード例

次の HTML と CSS を考えてみましょう:

<div class="b">div 1</div>
<div>
<p>および次の JavaScriptコード:</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p>このコードは、次の幅を出力します。 divs:</p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

結論

要素のスタイルと一致する CSS ルールの順序の両方を考慮することにより、このカスタム getMatchedStyle 関数は、CSS プロパティ値を元の単位で正確に取得します。この知識は、要素のサイズと寸法を正確に管理するために不可欠です。