How to determine whether CSS/jQuery exists

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 thetag in thetag of the HTML document. For example:

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

1. Determine whether theelement exists

In JavaScript, we can get the elements in thetag through the document.getElementsByTagName("link") method Allelements, 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未加载"); }

2. Determine whether the CSS style is effective

In addition to determining whether theelement 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:

   
   
测试
  

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

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 thetag of the HTML document. For example:

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