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.

The class Attribute — Structure map

Clickable & Draggable!

The class Attribute — Related pages: