This article will demonstrate the approaches to check if a body has a specific class using JavaScript.
How to Check if Body has a Specific Class Using JavaScript?
To check if a body has a specific class using JavaScript, apply the following approaches:
- “classList” property and “contains()” method.
- “getElementsByTagName()” and “match()” methods.
- “jQuery”.
Let’s illustrate each of the approaches one by one!
Approach 1: Check if Body has a Specific Class in JavaScript Using classList Property and contains() Methods
The “classList” property gives the CSS class names of an element. Whereas the “contains()” method gives true if a node is a descendant. These methods combined can be applied to access the contained class in the associated element.
Syntax
In the above syntax:
- “desnode” corresponds to the node descendant of the associated node.
Example
Let’s have an overview of the below-given example:
<h2>This is Linuxhint Website</h2>
</center></body>
<script type="text/javascript">
if (document.body.classList.contains('contain')){
console.log("The body element has class");
}
else{
console.log("The body element does not have class");
}
</script>
Apply the below-stated steps, as given in the above code:
- Firstly, include a “<body>” element having the set attribute “class”.
- Also, add a heading within the particular element(<body>).
- In the JS code, apply the “classList” property combined with the “contains()” method.
- This will resultantly access to the class of the associated “<body>” element based on the specified class name in the method’s parameter.
- Upon the satisfied condition, the “if” condition will execute.
- Contrarily, the “else” statement code block will execute.
Output
In the above output, it can be seen that the particular class is included in the “<body>” element.
Approach 2: Check if Body has a Specific Class in JavaScript Using getElementsByTagName() and match() Methods
The “getElementsByTagName()” method gives a collection of all elements having a particular tag name. The “match()” method matches the specified value with the string. These methods can be utilized to access the required element by its tag and check for the specific class.
Syntax
In the provided syntax:
- “tag” represents the element’s tag name.
Example
The following example demonstrates the discussed concept:
<img src="template2.png" height="150px" width="150px">
</center></body>
<script type="text/javascript">
let get = document.getElementsByTagName("body")[0].className.match(/contains/)
if (get) {
console.log("The body element has class");
}
else {
console.log("The body element does not have class");
}
</script>
In the above code snippet:
- Likewise, include a “<body>” element having the specified class.
- Also, contain an image with the set dimensions within the stated element in the previous step.
- In the JavaScript lines of code, access the “<body>” element by its tag using the “getElementsByTagName()” method.
- The “[0]” indicates that the first element corresponding to the stated tag in the previous step will be fetched.
- The “className” property and the “match()” method will match for the stated class in its parameter against the “<body>” element.
- The former statement in the “if” condition will execute upon the satisfaction of all the conditions in the previous steps.
- Otherwise, the latter statement will be displayed.
Output
The above output indicates that the applied condition for a specific class is satisfied.
Approach 3: Check if Body has a Specific Class in JavaScript Using jQuery
This approach can be implemented to access the required element directly and locate the specific class against it with the help of its method simply.
Example
Let’s go through the below-given example:
<center><body class="contains">
<textarea placeholder="Type any text..."></textarea>
</center></body>
if ($("body").hasClass("contains")){
alert("The body element has class")
}
else{
alert("The body element does not have class")
}
</script>
In the above lines of code:
- Include the “jQuery” library to utilize its functionalities.
- Similarly, include the “<body>” element having the stated class.
- Also, add a “<textarea>” element within the stated element in the previous step.
- In the JS code, access the “<body>” element. Also, apply the “hasClass()” method to search for the stated class in the fetched element.
- This will resultantly alert the former message upon the satisfied condition.
- In the other case, the latter statement will be displayed.
Output
The above output implies that the desired requirement is achieved.
Conclusion
The “classList” property and “contains()” method, the “getElementsByTagName()” and “match()” methods, or the “jQuery” can be used to check if a body has a specific class using JavaScript. These approaches can be utilized to search for the particular class within an element by referring to the corresponding element directly, by its tag, or using the jQuery method. This blog explained to check if a body has a specific class in JavaScript
