在網頁開發過程中,我們經常需要動態地引入 CSS 樣式文件。在 JavaScript 和 jQuery 中,也提供了相應的函數來判斷是否已經引入某個 CSS 文件。
在 JavaScript 中,我們可以通過遍歷頁面的所有 link 元素,判斷其 href 屬性是否與所需的 CSS 文件路徑相同,來判斷是否已經引入 CSS 文件。
function cssLoaded(url) { var links = document.getElementsByTagName('link'); for (var i = 0; i< links.length; i++) { if (links[i].href === url) { return true; } } return false; }
在 jQuery 中,我們可以使用 $.fn.cssLoaded 函數判斷是否已經引入某個 CSS 文件。這個函數使用了 $.get 函數異步獲取 CSS 文件內容,如果獲取成功,則表示文件已經引入。
$.fn.cssLoaded = function(url) { var d = $.Deferred(); $('') .attr({ href: url, rel: 'stylesheet' }) .appendTo('head') .on('load', function() { d.resolve(); }) .on('error', function() { d.reject(); }); return d.promise(); };
以上兩種方法其實是相互補充的,如果遇到某些情況下無法使用一個方法,可以嘗試使用另一個方法。同時,也需要注意避免重復引入同一個 CSS 文件。