JavaScript で HTML 要素の CSS プロパティ値を取得する

Web 開発では、CSS プロパティを動的に操作することで、ユーザー エクスペリエンスとインターフェイスを向上させることができます。 JavaScript を使用すると、これらのプロパティに簡単にアクセスできます。

このシナリオでは、CSS ファイルが HTML ページにリンクされており、クラス名 " の div の特定のプロパティ (色など) を取得する必要があります。レイアウト。」 JavaScript を使用してこれを実現する方法は次のとおりです:

オプション 1: ドキュメント スタイル シートの解析 (非推奨)

説明:
この方法ではドキュメントを手動で反復処理します。 .styleSheets オブジェクトを取得し、その内容を解析して目的のプロパティを検索します。ただし、この方法は、特に複雑な CSS ファイルの場合や、複数の要素のプロパティを取得する必要がある場合には扱いにくくなる可能性があるため、お勧めできません。

オプション 2: 要素をエミュレートし、計算されたスタイルを使用する (推奨)

説明:
この方法はより効率的で、正確な結果が得られます。これには、ターゲット要素と同じクラス名を持つ要素を作成し、作成された要素の計算されたスタイルにアクセスすることが含まれます。計算されたスタイルは、継承されたスタイルやユーザー スタイルシートまたは JavaScript を通じて行われた変更を含む、要素に適用される実際のスタイルを表します。

JavaScript コード:

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

インライン以外のスタイルに関する考慮事項

インライン スタイル定義を使用せずに継承されたスタイル プロパティを取得する場合は、インライン スタイルを一時的に削除してから、継承された値を取得できます。

JavaScript コード:

function getNonInlineStyle(elem, prop) {
  var style = elem.cssText; // Cache the inline style
  elem.cssText = ""; // Remove inline styles
  var inheritedPropValue = getStyleProp(elem, prop); // Retrieve inherited value
  elem.cssText = style; // Restore inline style
  return inheritedPropValue;
}