HTML Class Attribute
The HTML class Attribute is used to specify one or more class names for an HTML element. We can use class attribute on any HTML element. Different HTML elements can share the same class attribute.
How to Use Class Attribute
In a below example we will define style for a class name “country”, with the help of CSS.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.country {
background-color:orange;
color: white;
}
</style>
<head>
<body>
<h3 class = "country"> Russia </h3>
<p> Russia is the largest country in the world. </p>
<h3 class = "country"> China </h3>
<p> China is the 2nd largest country in the world. </p>
<h3 class = "country"> United States </h3>
<p> United States is the 3rd largest country in the world. </p>
Output
Russia
Russia is the largest country in the world.
China
China is the 2nd largest country in the world.
United States
United States is the 3rd largest country in the world.
How to use class attribute in JavaScript
I have already showed you how you can use class attribute in CSS. Now let’s see how you can use this in JavaScript. We use getElementsByClassName() method to specify the class name in JavaScript.
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementsByClassName("country");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</head>
<body>
<p>Click the button, and a JavaScript hides all
elements with the class name "country":</p>
<button onclick="myFunction()">Hide elements</button>
<h3 class="country"> Russia </h3>
<p> Russia is the largest country in the world.</p>
<h3 class="country"> China </h3>
<p> China is the 2nd largest country in the world.</p>
<h3 class="country"> United States </h3>
<p> United States is the 3rd largest country in the world.</p>
</body>
</html>
Output
Click the button, and a JavaScript hides all elements with the class name "country":
Russia
Russia is the largest country in the world.
China
China is the 2nd largest country in the world.
United States
United States is the 3rd largest country in the world.
If you click on the Hide elements button, JavaScript hides all elements with the class name "country".
Adding Multiple Classes to HTML Elements
As I already told you HTML elements can have more than one class name, and each class name must be separated by a space. In a below example let's try to add multiple classes to HTML elements:
Example
<!DOCTYPE html>
<html>
<style>
.country {
background-color: orange;
color: white;
padding: 8px;
}
.middle {
text-align: center;
}
</style>
<body>
<h3 class="country middle"> Russia </h3>
<h3 class="country"> China </h3>
<h3 class="country"> United States</h3>
</body>
</html>
Output
Russia
China
United States
All three h3 headers have the common class name "country", but we also add class name "middle", with Russia , Which makes the text "Russia" aligned to center.
3 thoughts on “HTML Class Attribute – crus4”