在編寫Web頁面時(shí),我們經(jīng)常需要使用JavaScript和CSS兩種語言來實(shí)現(xiàn)我們想要的視覺效果和交互功能。而有時(shí)候,我們需要判斷某個(gè)CSS是否已經(jīng)存在,以便動(dòng)態(tài)地添加或移除它,達(dá)到實(shí)時(shí)調(diào)整頁面樣式的目的。
那么,問題來了,JS能否判斷CSS存在呢?答案是肯定的。
function isCssLoaded(url) { for (var i = 0; i < document.styleSheets.length; i++) { if (url === document.styleSheets[i].href) { return true; } } return false; }
上面這段代碼可以判斷給定的CSS鏈接是否已經(jīng)被加載,如果已經(jīng)加載則返回true,否則返回false。
其原理是遍歷頁面上所有的樣式表,檢查它們的href屬性是否與給定的鏈接url一致。
需要注意的是,這種方法只適用于外鏈CSS,對于內(nèi)嵌樣式表和行內(nèi)樣式,是無法判斷是否存在的。同時(shí),如果你在JS動(dòng)態(tài)加載了一個(gè)CSS,需要等待它加載完成后再做判斷。
在實(shí)際使用中,我們可以結(jié)合具體的業(yè)務(wù)需求來使用這個(gè)方法,比如判斷某個(gè)特定的CSS是否存在,或者監(jiān)控頁面上某些元素的位置變化等等。