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

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

Web 開発では、外部スタイルシートから CSS 値にアクセスする必要がある場合があります。対応する HTML 要素がページ上に物理的に存在する必要はありません。このシナリオは、コンテンツを動的に生成するときによく発生します。

一般的に使用される jQuery メソッド $('element').css('property') は、ページ内でレンダリングされる要素に依存します。ただし、要素を作成する前に CSS プロパティ値を決定するには、別のアプローチが必要です。

サロゲート要素の使用

1 つの解決策は、一時的な要素を作成することです。非表示のサロゲート要素を検索し、その計算されたスタイルを読み取ります。 jQuery の $("

").hide().appendTo("body") は、ページ本文に非表示の段落要素を作成します。その後、$p.css("color") を呼び出して CSS カラー プロパティ値を取得できます。

コード例

// Scoping function to avoid creating a global
(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    console.log($p.css("color"));
    $p.remove();
})();

注: この例では、外部 CSS ファイルで、必要なスタイル プロパティを持つ「p」要素を定義する必要があります。

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