How to determine whether CSS/jQuery exists-Front-end Q&A-php.cn

CSS and jQuery are commonly used tools in web development. But sometimes, we need to determine whether they exist in the web page in order to flexibly control the style and behavior of the web page. This article describes how to determine whether CSS and jQuery exist, and provides relevant code examples.

1. Determine whether CSS exists

Before judging whether CSS exists, you need to understand the loading process of CSS. Generally speaking, CSS is introduced through the tag in the tag of the HTML document. For example:

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

Copy after login

In the above code, we introduced the CSS file named style.css through the tag. So, how to determine whether this CSS file has been loaded?

Determine whether the element exists

In JavaScript, we can get the elements in the tag through the document.getElementsByTagName("link") method All elements, and then loop through these elements to determine whether their href attribute is equal to the CSS file path we want to load. If equal, the CSS file has been loaded, otherwise the CSS file has not been loaded. The sample code is as follows:

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

Copy after login

Determine whether the CSS style is effective

In addition to determining whether the element exists, we can also determine whether the CSS style is effective. Whether CSS is loaded. The specific method is to add a test element to the HTML document, and then check whether a certain style of the element is effective. The sample code is as follows:

HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <!-- 测试元素 -->
    <div id="test">测试</div>
  </body>
</html>

Copy after login

CSS:

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

Copy after login

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

Copy after login

In the above code, we created a< with the id of test ;div> element and add it to the HTML document. Then, use the getComputedStyle() method to obtain the color style of the element. If the color value is equal to the red RGB value (255,0,0), it means that the CSS has taken effect.

2. Determine whether jQuery exists

Before judging whether jQuery exists, you need to understand the loading process of jQuery. Generally speaking, we introduce the jQuery JavaScript library in the tag of the HTML document. For example:

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

Copy after login

In the above code, we introduced the jQuery library through the