要判断在 HTML 中的 link 标签引用的 CSS 文件是否成功,可以使用以下方法:
使用浏览器的开发者工具检查元素。在大多数浏览器中,您可以使用 F12 键打开开发者工具。然后,在“网络”选项卡中,您可以看到所有加载的文件,包括 CSS 文件。如果看到 200 状态码,则表示文件加载成功;如果看到 404 状态码,则表示文件未找到。
在 HTML 中添加 JavaScript 代码来检查 CSS 文件是否加载。例如,您可以使用以下代码:
function checkCssLoaded(callback) {
let isLoaded = false;
let links = document.getElementsByTagName('link');
for (let i = 0; i < links.length; i++) {
if (links[i].rel === 'stylesheet' && !links[i].disabled) {
isLoaded = true;
break;
}
}
if (isLoaded) {
callback();
} else {
setTimeout(function() {
checkCssLoaded(callback);
}, 100);
}
}
checkCssLoaded(function() {
console.log('CSS 文件已加载');
});
- 在 HTML 中使用 onload 事件处理程序来检查 CSS 文件是否加载。例如:
<linkrel="stylesheet" href="style.css" onload="console.log('CSS 文件已加载')">
注意:这些方法均基于浏览器的行为,并不保证在所有浏览器中都有效。