ホームページ > ウェブフロントエンド > CSSチュートリアル > 最初に定義された CSS プロパティ値 (パーセンテージと EM 単位を含む) を取得するにはどうすればよいですか?

最初に定義された CSS プロパティ値 (パーセンテージと EM 単位を含む) を取得するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-12-15 14:49:26
オリジナル
149 人が閲覧しました

How Can I Retrieve the Initially Defined CSS Property Values (Including Percentage and EM Units)?

最初に定義された CSS プロパティ値を取得 (パーセント/EM/PX)

Web 開発では、元の CSS プロパティ値を取得することが重要な場合がありますその後の変更に関係なく、要素の CSS プロパティ値。これは、パーセントや em などの単位を使用する場合に特に当てはまります。多くの場合、計算値では代わりに px 値が提供されるためです。

問題の定義

問題は、getComputedStyle などの関数を使用するときに発生します。または jQuery の css() を使用して現在の CSS プロパティ値を取得します。これらのメソッドは、最初に他の単位で設定されている場合でも、値をピクセル単位で返します。

解決策: getMatchedStyle

この問題に対処するには、getMatchedStyle というカスタム JavaScript 関数を使用できます。雇用されている。この関数は、要素の CSS ルールを反復処理し、要素のスタイルと重要なルールに優先順位を付けます。その後、CSS ルールで定義されている初期値を返します。

コード例

function getMatchedStyle(elem, property) {
  // Check for element-defined property (highest priority)
  var val = elem.style.getPropertyValue(property);

  // If important, return immediately
  if (elem.style.getPropertyPriority(property)) return val;

  // Get matched CSS rules in descending priority order
  var rules = getMatchedCSSRules(elem);

  // Iterate through rules backwards to ensure correct priority
  for (var i = rules.length; i--;) {
    var r = rules[i];

    // Check if rule is important
    var important = r.style.getPropertyPriority(property);

    // Update value only if not set or if important rule encountered
    if (val == null || important) {
      val = r.style.getPropertyValue(property);

      // Return if important rule encountered
      if (important) break;
    }
  }

  return val;
}
ログイン後にコピー

使用例

次の HTML と CSS について考えてみましょう:

<div class="b">first</div>
<div>
ログイン後にコピー

次の JavaScriptコードを使用して div の初期幅を取得できます。

var d = document.querySelectorAll('div');

for (var i = 0; i < d.length; ++i) {
  console.log("div " + (i + 1) + ":  " + getMatchedStyle(d[i], 'width'));
}
ログイン後にコピー

Output

div 1:  100px
div 2:  50%
ログイン後にコピー

getMatchedStyle 関数を使用すると、CSS を正確に取得できます。後続のスタイルによって変更されたかどうかに関係なく、最初に定義されたとおりのプロパティ値。

以上が最初に定義された CSS プロパティ値 (パーセンテージと EM 単位を含む) を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート