How to add a class to an element in JavaScript
In this blog, we'll learn how to add a class to an HTML element using JavaScript. Adding classes to HTML elements is a common way to apply CSS styles and manipulate the appearance and behavior of elements within a web page. We will be writing for someone who is learning programming, so we will avoid using jargons and provide explanations along with code examples to ensure a clear understanding.
What are HTML, CSS, and JavaScript?
Before diving into the main topic, let's quickly discuss what HTML, CSS, and JavaScript are and how they interact with each other in a web page.
HTML (HyperText Markup Language): It is a markup language used to structure content on the web. It consists of elements (also known as tags) that define the structure of a web page.
CSS (Cascading Style Sheets): It is a stylesheet language responsible for the visual appearance of HTML elements. It allows you to apply styles (colors, fonts, spacing, etc.) to HTML elements.
JavaScript: It is a programming language that allows you to add interactivity and dynamic content to a web page.
In our case, we will use JavaScript to add a class to an HTML element, and then that class will be styled using CSS.
What is a class?
In the context of HTML and CSS, a class is an attribute you can add to HTML elements to group them together or apply styles to them. You can think of a class as a label or a category that can be used to identify specific elements. By using classes, you can apply the same style to multiple elements without having to write the same CSS rules repeatedly.
Let's look at a simple example of using a class in HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
.red-text {
color: red;
}
</style>
</head>
<body>
<h1 class="red-text">Hello, World!</h1>
<p class="red-text">This paragraph has the red-text class applied to it.</p>
</body>
</html>
In the example above, we have an HTML file with two elements: an <h1> and a <p>. We have defined a class called red-text inside the <style> tag, which sets the color of the text to red. Then, we applied this class to both the <h1> and <p> elements using the class attribute.
Adding a class to an element using JavaScript
Now that we have a basic understanding of HTML, CSS, and classes, let's learn how to add a class to an element using JavaScript.
Step 1: Select the HTML element
Before we can add a class to an element, we first need to select the element using JavaScript. There are several ways to select elements using JavaScript, but in this tutorial, we will focus on two common methods:
document.getElementById(): This method allows you to select an element by its id attribute. The id attribute is unique for each element on a web page.
document.querySelector(): This method allows you to select an element using a CSS selector. The selector can be a tag, class, or id.
Here's an example of selecting an element using both methods:
<!DOCTYPE html>
<html>
<body>
<h1 id="my-heading">Hello, World!</h1>
<p class="my-paragraph">This is a paragraph.</p>
<script>
var headingElement = document.getElementById('my-heading');
console.log(headingElement); // Output: <h1 id="my-heading">Hello, World!</h1>
var paragraphElement = document.querySelector('.my-paragraph');
console.log(paragraphElement); // Output: <p class="my-paragraph">This is a paragraph.</p>
</script>
</body>
</html>
In the example above, we have an <h1> element with an id of my-heading and a <p> element with a class of my-paragraph. We selected both elements using the document.getElementById() and document.querySelector() methods and logged them to the console.
Step 2: Create a CSS class
Next, we need to create a CSS class that we want to add to our element. For this example, let's create a class called blue-text that will change the color of the text to blue:
<!DOCTYPE html>
<html>
<head>
<style>
.blue-text {
color: blue;
}
</style>
</head>
<body>
<!-- Rest of the HTML content -->
</body>
</html>
Step 3: Add the class to the element
Now that we have selected our element and created a CSS class, it's time to add the class to the element using JavaScript.
To add a class to an element, we can use the classList.add() method. The classList property of an element allows you to manipulate the list of classes assigned to the element. The add() method is used to add one or more classes to the element.
Here's how you can add the blue-text class to the <h1> and <p> elements from our previous examples:
<!DOCTYPE html>
<html>
<head>
<style>
.blue-text {
color: blue;
}
</style>
</head>
<body>
<h1 id="my-heading">Hello, World!</h1>
<p class="my-paragraph">This is a paragraph.</p>
<script>
var headingElement = document.getElementById('my-heading');
headingElement.classList.add('blue-text');
var paragraphElement = document.querySelector('.my-paragraph');
paragraphElement.classList.add('blue-text');
</script>
</body>
</html>
After running the code above, the text of both the <h1> and <p> elements will be blue.
Conclusion
In this tutorial, we learned how to add a class to an HTML element using JavaScript. We discussed the basics of HTML, CSS, and classes before diving into the process of selecting an element, creating a CSS class, and adding the class to the element using the classList.add() method. We also provided code examples to help illustrate the concepts.
Understanding how to add classes to elements using JavaScript is an important skill for web developers, as it allows you to create dynamic and interactive web pages. By adding, removing, or modifying classes on elements, you can easily change the appearance and behavior of a web page without having to modify the HTML or CSS code directly.