JavaScript で要素の CSS プロパティ値を取得するにはどうすればよいですか?

JavaScript を使用した要素の CSS プロパティの読み取り

問題:

値の取得方法スタイルシートが Web ページの外部にリンクされていることを考慮して、JavaScript を使用して要素の CSS プロパティを取得するにはどうすればよいですか?

解決策:

主なアプローチは 2 つあります:

1. document.styleSheets の使用:

この方法では、document.styleSheets 配列を手動で繰り返し、CSS ルールを解析して目的のプロパティを見つけます。ただし、このアプローチはリソースを大量に消費し、ほとんどのシナリオでは実用的ではないため、お勧めできません。

2.一致する要素の作成と getComputedStyle の使用:

このメソッドは、ターゲット要素と同じ CSS セレクターを持つ要素を作成し、getComputedStyle メソッドを使用してプロパティ値を取得します。このアプローチの利点は、継承されたすべてのスタイルと動的に適用されるスタイルをすべて考慮できることです。

コード例:

div の "color" プロパティを取得するにはクラス "layout" では、次のコードを使用します。

<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
}</code>

使用法:

<code class="javascript">window.onload = function(){
    var d = document.createElement("div"); //Create div
    d.className = "layout";                //Set class = "layout"
    alert(getStyleProp(d, "color"));       //Get property value
}</code>

追加メモ:

インラインを無視するには現在の要素のスタイル定義には、getNonInlineStyle 関数を使用します:

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText; //Cache the inline style
    elem.cssText = "";        //Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); //Get inherited value
    elem.cssText = style;     //Add the inline style back
    return inheritedPropValue;
}</code>

以上がJavaScript で要素の CSS プロパティ値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。