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