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

指定された単位で CSS プロパティ値を取得する

Web 開発では、CSS プロパティ値を最初に定義されたとおりに取得することが重要な場合があります。 、指定された単位を維持します。 getComputedStyle と jQuery の css() メソッドはピクセル単位で値を提供しますが、生の CSS 値を取得することが重要となるシナリオもあります。フレームワークに依存せずに Google Chrome でこれを実現する方法は次のとおりです。

Chrome の Elemental Inspector

Chrome の要素インスペクターには、CSS プロパティ値を表示する機能という貴重な機能があります。設定どおりに設定され、意図した値の視覚的な手がかりを提供します。これは、Chrome がこの情報をプログラムで取得できることを示唆しています。

getMatchedStyle Function

これをコードで実現するには、getMatchedCSSRules() メソッドを利用して一致したルールを取得します。を、優先順位の逆の順序で繰り返します。外部ルールよりも要素スタイルを優先し、重要なプロパティをチェックします。 getMatchedStyle 関数は次のようになります。

function getMatchedStyle(elem, property){
    // Element style has highest priority
    var val = elem.style.getPropertyValue(property);

    // Stop if important
    if(elem.style.getPropertyPriority(property))
        return val;

    // Get matched rules
    var rules = getMatchedCSSRules(elem);

    // Iterate rules backwards, prioritizing highest priority
    for(var i = rules.length; i --> 0;){
        var r = rules[i];

        var important = r.style.getPropertyPriority(property);

        // Reset if more important or not yet set
        if(val == null || important){
            val = r.style.getPropertyValue(property);

            // Stop if important
            if(important)
                break;
        }
    }

    return val;
}

例

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

<div class="b">div 1</div>
<div>
<pre class="brush:php;toolbar:false">div      { width: 100px; }
.d3      { width: auto !important; }
div#b    { width: 80%;   }
div#c.c  { width: 444px; }
x, div.a { width: 50%;   }
.a       { width: 75%;   }

与えられたコードの場合、次の幅は次のようになります。取得:

div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

これは、指定された単位で CSS プロパティ値を取得できる機能を強調し、スクリプトベースのスタイル操作タスクの柔軟性と精度を高めます。