JavaScript を使用して Web ページ要素の CSS プロパティを取得する方法-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-10-23 19:04:02

オリジナル

741 人が閲覧しました

How to Retrieve CSS Properties of Webpage Elements Using JavaScript?

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

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

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

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

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

対象の要素と同じプロパティを持つ要素を作成します (例: < ;div> クラス名 "layout").
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 オブジェクトを手動で解析する

document.styleSheets オブジェクトにアクセスします。これには、ドキュメントにリンクされているすべてのスタイルシートの配列が含まれています。
各スタイルシートで 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 サイトの他の関連記事を参照してください。