jQuery の要素を持たずに外部スタイルシートから CSS 値を取得する方法

JavaScript/jQuery を使用した外部スタイルシートからの CSS 値の取得

Web 開発における一般的なタスクの 1 つは、外部 CSS ファイルからの値にアクセスすることです。 jQuery メソッド $('element').css('property') は既存要素の計算済みスタイルを取得できますが、ターゲット要素がまだ動的に生成されていない場合は困難になります。

ありがたいことに、jQuery を使用すると、実際の要素に依存せずに CSS 値をフェッチする賢いトリックを利用できます。解決策を見てみましょう:

jQuery 解決策:

次の手順を使用して、ターゲット要素の隠しコピーを作成できます:

1. 次のプレースホルダー要素を作成しますjQuery:

   var $p = $("<p></p>").hide().appendTo("body");

2. 標準の 'css()' 関数を使用して CSS 値にアクセスします:

   console.log($p.css("color"));

3. 非表示要素を削除しますを取得した後、値:

   $p.remove();

例:

次の CSS と HTML を考えてみましょう:

p { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQuery ソリューションを使用すると、「色」を取得できますvalue:

(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    console.log($p.css("color"));
    $p.remove();
})();

このトリックにより、ページ上のターゲット要素の存在に依存せずに CSS 値を取得できるため、動的に生成されるコンテンツに便利なテクニックになります。

以上がjQuery の要素を持たずに外部スタイルシートから CSS 値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。