ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScript でその ID を使用して要素に適用されているすべてのスタイルを抽出する方法

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

Susan Sarandon
リリース: 2024-10-29 05:11:03
オリジナル
635 人が閲覧しました

How to Extract All Applied Styles for an Element Using Its ID in JavaScript?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート