HTML class attribute gives an element one or more class names. Most of the time, the class attribute points to a class in a style sheet. But JavaScript can also use it (through the HTML DOM) to change HTML elements with a certain class.
The class attribute of an HTML element is used to give it a class. The same class can be used by more than one HTML element.
Using Class Attribute
In a style sheet, the class attribute is often used to point to a class name. It can also be used by JavaScript to access and change elements with the same class name.
In the next example, there are three <div> elements that all have a class attribute with the value \”box.\” The.city style definition in the head section will be used to style all three <div> elements in the same way:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: blue;
color: white;
border: 3px solid orange;
margin: 20px;
padding: 20px;
border-radius:10px;
}
</style>
</head>
<body><div class=\”box\”>
<h2>Box 1</h2>
<p>example of class</p>
</div><div class=\”box\”>
<h2>Box 2</h2>
<p>example of class</p>
</div><div class=\”box\”>
<h2>Box 3</h2>
<p>example of class</p>
</div></body>
</html>
Output
![\"class](\"https://phponline.in/wp-content/uploads/2023/02/class-example.jpg\")
Note that the case of the class name is important!
Tip 1: You can use the class attribute on any HTML element.
Tip 2: Our CSS Tutorial has a lot more information about CSS.
How To Write Class
To make a class, write a period (.) followed by the name of the class. Then, put the CSS properties between the curly braces :
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: blue;
color: white;
border: 3px solid orange;
margin: 20px;
padding: 20px;
border-radius:10px;
}
</style>
</head>
<body><div class=\”box\”>
<h2>Box 1</h2>
<p>example of class</p>
</div><div class=\”box\”>
<h2>Box 2</h2>
<p>example of class</p>
</div><div class=\”box\”>
<h2>Box 3</h2>
<p>example of class</p>
</div></body>
</html>
Output
Multiple Classes
There can be more than one class for an HTML element.
To define more than one class, put a space between the class names, like this: div class=\”box wraper\”>. All of the classes that were given will be used to style the element.
In the following example, the first h2> element is part of both the city class and the main class, so it will get the CSS styles from both classes:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: blue;
color: white;
border: 3px solid orange;
margin: 20px;
padding: 20px;
border-radius:10px;
}
</style>
</head>
<body><div class=\”box wraper\”>
<h2>Box 1</h2>
<p>example of class</p>
</div><div class=\”box anotherclass\”>
<h2>Box 2</h2>
<p>example of class</p>
</div><div class=\”box wraper\”>
<h2>Box 3</h2>
<p>example of class</p>
</div></body>
</html>
Output
Different Elements Can Use Same Class
The same class name can be pointed to by more than one HTML element.
In the following example, both <h2> and <p> point to the \”box\” class and will have the same style:
Example
<!DOCTYPE html>
<html>
<head>
<style>
.box {
background-color: blue;
color: white;
border: 3px solid orange;
margin: 20px;
padding: 20px;
border-radius:10px;
}
</style>
</head>
<body><div class=\”box\”>
<h2 class=\”box\”>Box 1</h2>
<p class=\”box\”>example of class</p>
</div><div class=\”box\”>
<h2 class=\”box\”>Box 2</h2>
<p class=\”box\”>example of class</p>
</div></body>
</html>
Output
![\"Different](\"https://phponline.in/wp-content/uploads/2023/02/class-example-2.jpg\")
Use of class attribute in JavaScript
JavaScript can also use the class name to do certain things for certain elements.
With the getElementsByClassName() method, JavaScript can get to elements with a certain class name:
Example
<!DOCTYPE html>
<html>
<body><h2>Use of The class Attribute in JavaScript</h2>
<button onclick=\”classFunction()\”>Hide elements</button>
<div class=\”box\”>
<h2>Box 1</h2>
<p>example of class</p>
</div><div class=\”box\”>
<h2>Box 2</h2>
<p>example of class</p>
</div><div class=\”box\”>
<h2>Box 3</h2>
<p>example of class</p>
</div><script>
function classFunction() {
var x = document.getElementsByClassName(\”box\”);
for (var i = 0; i < x.length; i++) {
x[i].style.display = \”none\”;
}
}
</script></body>
</html>
Output
![\"class](\"https://phponline.in/wp-content/uploads/2023/02/class-in-javascript.jpg\")
Don\’t worry if you don\’t understand the code in the above example.
You can read our HTML JavaScript chapter or our JavaScript Tutorial to learn more about JavaScript.