淘先锋技术网

首页 1 2 3 4 5 6 7

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