ID のみを使用して要素のすべてのスタイルを取得する方法

Mary-Kate Olsen
リリース: 2024-10-29 11:31:02
オリジナル
670 人が閲覧しました

How to Retrieve All Styles of an Element Using Only Its ID?

ID のみを使用して要素からすべてのスタイルを収集する方法

この質問では、関数 getStyleById を開発することを目的としています。 ID のみを指定して、指定された要素のすべてのスタイル属性とそれに対応する値を取得します。この関数は、インライン スタイルと CSS ファイル内で定義されたスタイルの両方を考慮する必要があります。

解決策:

これを実現するには、次のような包括的なアプローチを採用できます。

  1. プロパティのループ: CSSStyleDeclaration オブジェクト (getComputedStyle) を反復するループを使用して、既知のプロパティ名をすべて取得します。名前ごとに、getPropertyValue を使用して値を取得します。
  2. ループの最適化: getComputedStyle をループの外側の別の変数に保存することで効率が向上します。
  3. インライン スタイルの処理: 通常の for…in ループを利用してインライン スタイル情報を取得します。

コードの実装:

<code class="javascript">function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    if (!elem) return []; // Empty list if element is absent.
    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>
ログイン後にコピー

これらのメソッドを組み込むことで、関数は、特定の要素に適用されたすべてのスタイルを効果的に収集し、さまざまなタスクでの実用性を高めます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!