JavaScript を使用して、ID によって HTML 要素に適用されるすべてのスタイル属性とその値を取得するにはどうすればよいですか?

JavaScript で ID によって要素のスタイル属性を取得する

イントロ

すべてのスタイル属性とその属性を取得する必要がありますID のみを使用して HTML 要素に値を適用しますか?この質問では、まさにそれを行う方法について詳しく説明します。

問題を理解する

目的は、要素の ID を取得する関数 getStyleById を作成することです。すべてのスタイル属性とそれに対応する値のリストを返します。この関数は、外部 CSS ファイルで定義されたインライン属性とスタイル属性の両方を考慮する必要があります。

ソリューションの作成

これを実現するには、次の方法を検討してください。

• CSSStyleDeclaration オブジェクト (getComputedStyle) をループします。 getPropertyValue を使用して CSSStyleDeclaration オブジェクトのインデックスを反復処理し、各プロパティ名の値を取得します。
• 使用目的currentStyle の in ループ (IE のみ): Internet Explorer にのみ存在する currentStyle オブジェクトの通常の for in ループを使用します。
• 同様にインライン スタイルをループします: 同じものを利用しますインライン スタイル属性を取得するためのループ アプローチ。

コードの実装

<code class="javascript">function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, empty list.
    var win = document.defaultView || window, style, styleNode = [];
    if (win.getComputedStyle) { /* Modern browsers */
        style = win.getComputedStyle(elem, '');
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
            //               ^name ^           ^ value ^
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } else { /* Ancient browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}</code>

使用法

これを使用するには関数を使用するには、要素の ID を指定して getStyleById を呼び出すだけです。例:

<code class="javascript">console.log(getStyleById('my-element'));</code>

これは、ID 'my-element' の要素に適用されるすべてのスタイル属性とその値を含む配列を出力します。

以上がJavaScript を使用して、ID によって HTML 要素に適用されるすべてのスタイル属性とその値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。