Heim > Artikel > Web-Frontend > So ermitteln Sie, ob CSS/jQuery vorhanden ist

So ermitteln Sie, ob CSS/jQuery vorhanden ist

PHPzOriginal: 2023-04-23 16:40:02706Durchsuche

CSS und jQuery sind häufig verwendete Tools in der Webentwicklung. Manchmal müssen wir jedoch feststellen, ob sie auf der Webseite vorhanden sind, um den Stil und das Verhalten der Webseite flexibel steuern zu können. In diesem Artikel wird beschrieben, wie Sie feststellen, ob CSS und jQuery vorhanden sind, und relevante Codebeispiele bereitgestellt.

1. Bestimmen Sie, ob CSS vorhanden ist

Bevor Sie beurteilen, ob CSS vorhanden ist, müssen Sie den Ladevorgang von CSS verstehen. Im Allgemeinen wird CSS über das -Tag im -Tag eingeführt. Zum Beispiel:

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

Im obigen Code haben wir die CSS-Datei mit dem Namen style.css über das Tag eingeführt. Wie kann man also feststellen, ob diese CSS-Datei geladen wurde?

Bestimmen Sie, ob das -Element vorhanden ist.

In JavaScript können wir alle -Elemente über die Methode document.getElementsByTagName("link") abrufen Bestimmen Sie anhand dieser Elemente, ob ihre href-Attribute mit dem CSS-Dateipfad übereinstimmen, den wir laden möchten. Bei Gleichheit wurde die CSS-Datei geladen, andernfalls wurde die CSS-Datei nicht geladen. Der Beispielcode lautet wie folgt:

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

Bestimmen Sie, ob der CSS-Stil wirksam ist

Zusätzlich zur Bestimmung, ob das -Element vorhanden ist, können wir auch feststellen, ob das CSS geladen ist, indem wir bestimmen, ob der CSS-Stil vorhanden ist wirksam. Die spezifische Methode besteht darin, dem HTML-Dokument ein Testelement hinzuzufügen und dann zu prüfen, ob ein bestimmter Stil des Elements wirksam ist. Der Beispielcode lautet wie folgt:

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

Im obigen Code erstellen wir ein

-Element mit der ID von test und fügen es dem HTML-Dokument hinzu. Verwenden Sie dann die Methode getComputedStyle(), um den Farbstil des Elements zu erhalten. Wenn der Farbwert dem roten RGB-Wert (255,0,0) entspricht, bedeutet dies, dass das CSS wirksam wurde.

2. Bestimmen Sie, ob jQuery vorhanden ist

Bevor Sie beurteilen, ob jQuery vorhanden ist, müssen Sie den Ladevorgang von jQuery verstehen. Im Allgemeinen führen wir die jQuery-JavaScript-Bibliothek im -Tag ein. Zum Beispiel:

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

Im obigen Code haben wir die jQuery-Bibliothek über das