The class Attribute
The class Attribute
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
- Is used to define equal styles for elements with the same class name.
- Is case sensitive.
- Can be used on any HTML element.
- Different tags, like <h2> and <p>, can have the same class name and thereby share the same style.
- HTML elements can have more than one class name, each class name must be separated by a space.
Using The class Attribute in JavaScript
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
The class name can also be used by JavaScript to perform certain tasks for elements with the specified class name.
JavaScript can access elements with a specified class name by using the getElementsByClassName() method.
Related concepts
→
The class Attribute
→