JavaScript でその ID を使用して要素に適用されているすべてのスタイルを抽出する方法

ID を使用して要素に適用されているすべてのスタイルを取得する方法

問題の説明

要素に適用されるスタイルを決定する関数を作成するにはID によって、インライン ファイル スタイルと CSS ファイル スタイルの両方を考慮する必要があります。現在の実装では要素のスタイル属性名とその ID を受け入れますが、目標は ID を指定するだけですべてのスタイル属性を取得することです。

Answer

Method:

1. CSSStyleDeclaration オブジェクトを反復処理します: getComputedStyle オブジェクト内のプロパティ名を取得します。 getPropertyValue を使用して値を収集します。
2. 標準の For ループを使用します: currentStyle にこのメソッドを採用します。
3. 同じループ手法を組み込む: これを適用しますインライン スタイルのアプローチ。

コード:

function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    // Check if element exists (empty list if not)
    if (!elem) return [];

    var win = document.defaultView || window, style, styleNode = [];

    // Modern browsers
    if (win.getComputedStyle) {
        style = win.getComputedStyle(elem, '');

        // Loop through style properties and gather values
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
        }
    } 
    // IE
    else if (elem.currentStyle) {
        style = elem.currentStyle;

        // Loop through currentStyle properties
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } 
    // Ancient browsers
    else {
        style = elem.style;

        // Loop through inline styles
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }

    // Return list of style properties
    return styleNode;
}

以上がJavaScript でその ID を使用して要素に適用されているすべてのスタイルを抽出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。