JavaScript または jQuery を使用して CSS クラス スタイルを動的に取得するにはどうすればよいですか?

JavaScript/jQuery を使用して CSS クラス スタイルを動的に取得する方法

Web 開発では、スタイルは CSS クラスを使用して定義されることがよくあります。 CSS クラスに基づいて要素のスタイルを変更するには、JavaScript または jQuery を利用できます。

jQuery を使用したスタイルの取得

jQuery は、スタイル属性にアクセスするための便利な方法を提供します。 CSS クラス:

$(element).css(styleAttribute);

たとえば、このクラスで要素の色を取得するには"highlight":

var color = $(element).css("color");

関数を使用した代替方法

別のアプローチは、ドキュメント内のスタイルシートを走査する関数を使用することです:

function getStyleRuleValue(style, selector) {
  // Iterate through style sheets
  for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];

    // Iterate through rules in the current sheet
    for (var j = 0; j < sheet.cssRules.length; j++) {
      var rule = sheet.cssRules[j];

      // Check if the rule matches the selector
      if (rule.selectorText.includes(selector)) {
        // Return the requested style
        return rule.style[style];
      }
    }
  }

  // No matching rule found
  return null;
}

使用法:

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

この関数は次のことができます。インライン スタイルシートと外部スタイルシートの両方からスタイルを取得できますが、同じドメインの外部シートに限定されます。

使用例

次の CSS クラスを考えてみましょう:

.highlight { 
    color: red; 
}

「ハイライト」に合わせてオブジェクトの色をアニメーション化するにはclass:

$(this).animate({
    color: getStyleRuleValue("color", ".highlight")
}, 750);

このアプローチにより、CSS カラーを動的に変更し、アニメーションをそれらの変更に応答させることができ、シームレスで一貫したユーザー エクスペリエンスを提供できます。

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