CSS是網頁設計過程中必不可少的一部分，但在實際開發中，我們經常需要在CSS加載完畢后做些列操作，所以如何判斷CSS是否已經完全加載完畢就成了我們需要解決的問題。
function isCssLoaded() {
var links = document.getElementsByTagName("link");
for (var i = 0; i< links.length; i++) {
if (links[i].getAttribute("rel") === "stylesheet" && links[i].getAttribute("href")) {
return false;
}
}
return true;
}上述代碼簡單介紹了一種判斷CSS加載狀態的方法。
首先，我們獲取所有<link>標簽，然后通過getAttribute()方法獲取到它們的rel屬性和href屬性，rel屬性必須是“stylesheet”，而href屬性不能是空的。如果存在rel屬性不為“stylesheet”或者href屬性為空的<link>標簽，則返回false，即CSS還沒有加載完畢。反之，則表示CSS已經加載完畢，返回true。
當然，這只是判斷CSS是否加載完成，如果需要在CSS加載完成后執行一些操作，我們可以在代碼中加入回調函數，等到CSS加載完畢后自動執行回調函數。下面是一段示例代碼：
function loadCss(url, callback) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
if (typeof callback === "function") {
var timer = setInterval(function() {
if (isCssLoaded()) {
clearInterval(timer);
callback();
}
}, 50);
}
}這段代碼中，我們定義了一個loadCss()函數，它接受兩個參數，一個是CSS文件的URL地址，另一個是回調函數。當CSS文件加載完成后，會自動執行回調函數。
具體執行流程如下：
- 創建一個
<link>標簽，并設置rel、type和href屬性，然后將它添加到<head>標簽中； - 判斷回調函數是否存在，如果存在則啟用定時器，不斷地檢測CSS是否已經加載完畢；
- 當CSS加載完成后，清除定時器并執行回調函數。
這樣，我們就可以在CSS加載完成后執行回調函數了。
上一篇判斷是否有css屬性
下一篇刪除源代碼鏈接的css