JavaScript または jQuery を使用して CSS クラス スタイル属性にアクセスするにはどうすればよいですか?

JavaScript/jQuery を使用して CSS クラスのスタイル属性にアクセスする

CSS アニメーションを扱う場合、要素のスタイル属性にアクセスするのが難しい場合がありますJavaScript または jQuery を使用して CSS クラスから。ただし、これらの属性を取得する効率的な方法があります。

カスタム関数を使用したスタイル属性の取得

1 つの方法は、ドキュメントのスタイル シートを横断するカスタム JavaScript 関数を作成することです。一致する CSS セレクターとスタイルを探しています。以下にサンプル関数を示します:

function getStyleRuleValue(style, selector, sheet) {
  var sheets = sheet ? [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;
}

たとえば、.highlight クラスの color 属性を取得するには:

var color = getStyleRuleValue('color', '.highlight');

注: この関数は、スタイル シートはインラインで定義されているか、現在のドキュメントと同じドメインを持っています。

適用中アニメーション

取得したスタイル属性を使用して、アニメーションに適用できます。

$(this).animate({
    color: color // Retrieved color attribute
}, 750);

CSS クラスを赤から青に更新すると、アニメーションがそれに応じて調整され、位置が調整されます。 CSS カラー スタイルが更新されました。

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