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 <p>たとえば、.highlight クラスの color 属性を取得するには:</p><pre class="brush:php;toolbar:false">var color = getStyleRuleValue('color', '.highlight');

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

適用中アニメーション

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

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

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

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