JavaScript を使用してクラスから CSS スタイル属性を効率的に取得するにはどうすればよいですか?

JavaScript/jQuery を使用した CSS クラスからのスタイル属性の取得

JavaScript でスタイル アニメーションを操作する場合、定義されたプロパティにアクセスする必要がある場合があります。 CSSクラスで。 CSS の変更に基づいてアニメーションを動的に更新し、アニメーションの一貫性を確保する必要がある場合に課題が発生します。

1 つのアプローチには、ターゲット CSS クラスに割り当てられた非表示要素を使用し、その計算された色を抽出して、それを使用することが含まれます。アニメーション。ただし、この方法は一般に非効率的であると考えられています。

より堅牢な解決策は、ドキュメントに関連付けられたスタイルシートを走査し、問題の特定のセレクターとスタイル プロパティを検索することです。このタスクを実行する関数の実装は次のとおりです。

function getStyleRuleValue(style, selector, sheet) {
  var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
  for (var i = 0, l = sheets.length; i < l; i++) {
    var sheet = sheets[i];
    if (!sheet.cssRules) {
      continue;
    }
    for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
      var rule = sheet.cssRules[j];
      if (rule.selectorText && rule.selectorText.split(',').indexOf(selector) !== -1) {
        return rule.style[style];
      }
    }
  }
  return null;
}

使用例:

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]); // searches a specific stylesheet

この関数は、セレクターのカンマ区切りリストを分割し、指定されたセレクターはリストの一部です。グループ化されたルールと同じドメインの外部スタイルシートの両方をサポートします。

この機能を利用すると、CSS クラス プロパティの変更に基づいてスタイル アニメーションを動的に調整でき、Web サイトやアプリケーションの美的一貫性とユーザーへの応答性を確保できます。設定。

以上がJavaScript を使用してクラスから CSS スタイル属性を効率的に取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。