ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript で ID によって要素のすべてのスタイル属性を取得する方法は?

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

Susan Sarandon
Susan Sarandonオリジナル
2024-10-30 22:42:03171ブラウズ

How to Retrieve All Style Attributes of an Element by ID in JavaScript?

要素 ID によるすべてのスタイル属性の取得

次のメソッドを使用して ID を指定すると、要素に適用されるすべてのスタイル属性を取得できます。

CSSStyleDeclaration オブジェクトのループ:

CSSStyleDeclaration オブジェクト (getComputedStyle) のインデックスを反復処理して、既知の各プロパティ名を取得します。値を取得するには、この名前で getPropertyValue を使用します。

インライン スタイルの処理:

インライン スタイルの場合は、他のスタイル タイプと同じループ メソッドを使用します。

すべてをまとめる:

コードは次のとおりです:

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

function getAllStyles(elem) {
    if (!elem) return [];

    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]) );
        }
    } 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>

以上がJavaScript で ID によって要素のすべてのスタイル属性を取得する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。