Check if Body has a Specific Class Using JavaScript

December 5, 2022 | by Arround The Web | No comments

Check if Body has a Specific Class Using JavaScript

While designing a web page or the site, there can be a possibility to sort similar functionalities against a dedicated class at the developer’s end. For instance, allocating a particular web page to the same element but with a distinct class to make things relevant. In such situations, checking if a body has a specific class assists in accessing various functionalities easily and in the updating processes as well.

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

node.contains(desnode)

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:

<center><body class= "contain">
<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

document.getElementsByTagName(tag)

In the provided syntax:

“tag” represents the element’s tag name.

Example
The following example demonstrates the discussed concept:

<center><body class="contains">
<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:

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

Source: linuxhint.com