怎麼判斷是否存在CSS/jQuery

CSS和jQuery是網頁開發常用的工具。但有時，我們需要在網頁中判斷它們是否存在，以便靈活地控制網頁的樣式和行為。本篇文章介紹如何判斷CSS和jQuery是否存在，並提供相關的程式碼範例。

一、判斷CSS是否存在

在判斷CSS是否存在之前，需要先了解CSS的載入過程。一般來說，CSS是在HTML文檔的標籤中透過標籤引入的。例如：

在上述程式碼中，我們透過標籤引入了名為style.css的CSS檔案。那麼，要如何判斷這個CSS檔案是否被載入了呢？

1. 判斷元素是否存在

在JavaScript中，我們可以透過document.getElementsByTagName("link")方法來取得標籤中的所有元素，然後循環遍歷這些元素，判斷它們的href屬性是否等於我們要載入的CSS檔案路徑。如果等於，則表示CSS檔案已經加載，否則CSS檔案尚未加載。範例程式碼如下：

function isCSSExist(url) { var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length; i++) { if (links[i].href == url) { return true; } } return false; } // 判断style.css是否存在 if (isCSSExist("style.css")) { console.log("style.css已加载"); } else { console.log("style.css未加载"); }

2. 判斷CSS樣式是否生效

#除了判斷元素是否存在外，我們還可以透過判斷CSS樣式是否生效來判斷CSS是否載入。具體做法是在HTML文件中新增一個測試元素，然後檢查該元素的某個樣式是否生效。範例程式碼如下：

HTML：

   
   
测试
  

CSS：

/* style.css */ #test { color: red; }

JavaScript：

function isCSSExist() { var test = document.createElement("div"); test.setAttribute("id", "test"); document.body.appendChild(test); var color = window.getComputedStyle(test, null).getPropertyValue("color"); if (color == "rgb(255, 0, 0)") { return true; } else { return false; } } // 判断style.css是否存在 if (isCSSExist()) { console.log("style.css已加载"); } else { console.log("style.css未加载"); }

上述程式碼中，我們建立了一個id為test的< ;div>元素，並將其新增至HTML文件中。然後，利用getComputedStyle()方法取得該元素的color樣式，如果顏色值等於紅色的RGB值(255,0,0)，則表示CSS已經生效。

二、判斷jQuery是否存在

在判斷jQuery是否存在之前，需要先了解jQuery的載入過程。一般來說，我們在HTML文件的標籤中引入jQuery的JavaScript庫。例如：

在上述程式碼中，我們透過