Login With Github

HTML Classes

Class attributes can define one or more classes for HTML elements.

If the HTML element defines the class attribute, then we can use CSS to define the style for the class. CSS can define the same style for elements with the same class name, and different styles for elements with different class names.At the same time we can also use JavaScript to find HTML elements more easily.

Class Attribute Syntax

In addition to the <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title> elements, other HTML elements can define class attributes.for example:

<h1 class="article_title">Header 1</h1>
Define CSS styles for this class:
<style>
.article_title{
    color:blue;
}
</style>

Note: The class name is case-sensitive.

Defining styles for HTML elements with the same class name

If you need to define the same style for multiple HTML elements, first you can define the same class name for these elements, and then define a style for this class so that the style of each element is unified.This is very convenient,for example:

<style>
.city {
    background-color: tomato;
    color: white;
    padding: 15px;
}
</style>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Tips: Please refer to the CSS tutorial for more about CSS usage.

Defining multiple classes for an HTML element

You can define multiple classes for the same HTML element. Each class name is separated by a space, for example:

<style>
.city {
    color: white;
    padding: 15px;
}
.london{
    background-color: tomato;
}
.paris{
    background-color: blue;
}
.tokyo{
    background-color: orange;
}
</style>

<h2 class="city london">London</h2>
<p>London is the capital of England.</p>

<h2 class="city paris">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city tokyo">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Finding HTML Elements Using JavaScript

Here is an example that will hide the name of each city when you click the button:

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

Tips: Please refer to the JavaScript tutorial for more about JavaScript usage.

0 Comment

temp