HTML 要素のすべてのインライン スタイルと外部スタイルを ID で取得する方法

要素 ID による HTML 要素のスタイル プロパティの取得

要素の ID を指定すると、それに適用されているすべてのスタイルを取得する関数を作成したいと考えています。インライン定義と外部定義の両方。

包括的なソリューションは次のとおりです。

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

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, return 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 browsers..*/
        style = elem.style;
        for (var i = 0; i < style.length; i++) {
            styleNode.push(style[i] + ':' + style[style[i]]);
        }
    }
    return styleNode;
}</code>

内訳は次のとおりです。

• getComputedStyle によって提供されるスタイル オブジェクトを反復処理して、すべてを取得します。スタイル プロパティとその値。
• currentStyle (IE) をサポートするブラウザの場合、そのオブジェクトを反復処理します。
• 要素のスタイル プロパティを直接反復してインライン スタイルを処理します。
• 結果は、「propertyName:propertyValue」形式の文字列の配列です。

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