首頁 > 文章 > web前端 > 怎麼判斷是否存在CSS/jQuery

怎麼判斷是否存在CSS/jQuery

PHPz原創: 2023-04-23 16:40:02749瀏覽

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

一、判斷CSS是否存在

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

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

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

判斷元素是否存在

在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未加载");
}

判斷CSS樣式是否生效

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

HTML：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <!-- 测试元素 -->
    <div id="test">测试</div>
  </body>
</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庫。例如：

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

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