指定された単位で 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>
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 プロパティ値を取得できる機能を強調し、スクリプトベースのスタイル操作タスクの柔軟性と精度を高めます。
以上がJavaScript で CSS プロパティ値を元の単位で取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。