在网页开发过程中,我们经常需要动态地引入 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 文件。