レンダリングされた要素を使用せずに外部スタイルシートから CSS プロパティを取得する方法

JavaScript/jQuery を使用して外部スタイルシートから CSS プロパティを取得する

質問:

次のことはできますか?関連する要素がまだ動的にレンダリングされていない場合でも、外部スタイルシートから CSS プロパティ値を取得しますか?一般的な jQuery メソッド $('element').css('property') では、要素がページ上に存在する必要があります。代替のアプローチはありますか?

答え:

はい、既存の要素に依存せずに CSS プロパティ値を取得することができます。 1 つの方法では、jQuery と一時的に挿入された要素を利用します。その仕組みは次のとおりです:

jQuery 解決策:

1. jQuery を使用して非表示要素を作成します (例:

   )。 (CSS で非表示)。

2. 非表示要素をページに追加します。
3. $('element').css('property') を使用して、非表示要素の CSS プロパティにアクセスし、ログに記録します。 .
4. 最後に、ページから非表示要素を削除します。

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

このソリューションを使用すると、ページ上に要素が存在する必要がなく、CSS プロパティ値に動的にアクセスできます。

以上がレンダリングされた要素を使用せずに外部スタイルシートから CSS プロパティを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。