首頁 >web前端 >css教學 >如何在 jQuery 中從沒有元素的外部樣式表中檢索 CSS 值?

如何在 jQuery 中從沒有元素的外部樣式表中檢索 CSS 值?

Patricia Arquette
Patricia Arquette原創
2024-11-21 11:42:121053瀏覽

How to Retrieve CSS Values from External Stylesheets Without Elements in jQuery?

使用Javascript/jQuery 從外部樣式表檢索CSS 值

Web 開發中的一項常見任務是從外部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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn