JavaScript を使用して Web ページ要素の CSS プロパティを取得する方法

JavaScript を使用した Web ページ要素の CSS プロパティの取得

CSS ファイルが Web ページにリンクされている場合、JavaScript 開発者は要素の特定の CSS プロパティを読み取る必要がある場合があります。

このシナリオでは、Web ページに

が含まれています。クラス名が「layout」の要素がある場合、開発者は JavaScript を使用してこの要素の特定のプロパティを取得するソリューションを必要とします。さまざまなアプローチが利用可能ですが、次の 2 つの推奨オプションがあります。

オプション 1: 要素の作成と変更

1. 対象の要素と同じプロパティを持つ要素を作成します (例: < ;div> クラス名 "layout").
2. getComputedStyle メソッドを使用して、計算されたプロパティ値を取得します。このメソッドは、関連するすべての CSS ルールを適用した後のスタイルを提供します。

<code class="javascript">function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}

window.onload = function(){
    var d = document.createElement("div");
    d.className = "layout";
    alert(getStyleProp(d, "color"));
}</code>

オプション 2: Document.styleSheets オブジェクトを手動で解析する

1. document.styleSheets オブジェクトにアクセスします。これには、ドキュメントにリンクされているすべてのスタイルシートの配列が含まれています。
2. 各スタイルシートで getPropertyValue() メソッドを使用して、目的のセレクターに関連付けられた特定のプロパティ値を取得します。

これ特定のセレクターによって定義されたすべての CSS プロパティを収集することが特に必要な場合を除き、このオプションは推奨されません。

さらに、現在の要素のインライン スタイル定義を無視するには、getNonInlineStyle() 関数を利用します。

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText;
    elem.cssText = "";
    var inheritedPropValue = getStyle(elem, prop);
    elem.cssText = style;
    return inheritedPropValue;
}</code>

以上がJavaScript を使用して Web ページ要素の CSS プロパティを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。