Maison > Article > interface Web > Comment déterminer si CSS/jQuery existe

Comment déterminer si CSS/jQuery existe

PHPzoriginal: 2023-04-23 16:40:02706parcourir

CSS et jQuery sont des outils couramment utilisés dans le développement Web. Mais parfois, nous devons déterminer s'ils existent dans la page Web afin de contrôler de manière flexible le style et le comportement de la page Web. Cet article décrit comment déterminer si CSS et jQuery existent et fournit des exemples de code pertinents.

1. Déterminer si CSS existe

Avant de juger si CSS existe, vous devez comprendre le processus de chargement de CSS. De manière générale, CSS est introduit via la balise dans la balise Par exemple :

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

Dans le code ci-dessus, nous avons introduit le fichier CSS nommé style.css via la balise . Alors, comment déterminer si ce fichier CSS a été chargé ?

Déterminer si l'élément existe

En JavaScript, nous pouvons obtenir tous les éléments dans la balise à travers ces éléments, déterminez si leurs attributs href sont égaux au chemin du fichier CSS que nous voulons charger. Si égal, le fichier CSS a été chargé, sinon le fichier CSS n'a pas été chargé. L'exemple de code est le suivant :

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

Déterminez si le style CSS est efficace

En plus de déterminer si l'élément efficace. La méthode spécifique consiste à ajouter un élément de test au document HTML, puis à vérifier si un certain style de l'élément est efficace. L'exemple de code est le suivant :

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

Dans le code ci-dessus, nous créons un élément

avec l'identifiant de test et l'ajoutons au document HTML. Ensuite, utilisez la méthode getComputedStyle() pour obtenir le style de couleur de l'élément. Si la valeur de couleur est égale à la valeur RVB rouge (255,0,0), cela signifie que le CSS a pris effet.

2. Déterminer si jQuery existe

Avant de juger si jQuery existe, vous devez comprendre le processus de chargement de jQuery. De manière générale, nous introduisons la bibliothèque JavaScript jQuery dans la balise Par exemple :

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

Dans le code ci-dessus, nous avons introduit la bibliothèque jQuery via la balise