Penggunaan Atribut class
Menggunakan Atribut class
Atribut class menentukan satu atau lebih nama kelas untuk elemen HTML.
Nama kelas dapat digunakan oleh CSS dan JavaScript untuk melakukan tugas tertentu untuk elemen dengan nama kelas yang ditentukan.
Contoh:
Gunakan CSS untuk menata semua elemen dengan nama kelas "city":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
<p>In this example, CSS styles all elements with the class name "city".</p>
</body>
</html>
Tip: Atribut Class dapat digunakan pada elemen HTML manapun.
Catatan: Nama kelas peka terhadap huruf besar!
Menggunakan Atribut Kelas dalam JavaScript
JavaScript dapat mengakses elemen dengan nama kelas tertentu dengan menggunakan metode getElementsByClassName ():
Contoh:
Saat pengguna mengeklik tombol, sembunyikan semua elemen dengan nama kelas "city":
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
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 "city":</p>
<button onclick="myFunction()">Hide elements</button>
<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>
</body>
</html>
Pelajari JavaScript di bab HTML JavaScript, atau di Tutorial JavaScript kami.
Multiple Classes
Elemen HTML bisa memiliki lebih dari satu nama kelas, setiap nama kelas harus dipisahkan oleh spasi.
Contoh:
Elemen style dengan nama kelas "city", juga elemen style dengan nama kelas "main":
<!DOCTYPE html>
<html>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
<body>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
<p>All three headers have the class name "city", in addition, London also have the class name "main", which makes the text center aligned.</p>
</body>
</html>
Pada contoh di atas, elemen h2 pertama dimiliki oleh kelas "city" dan kelas "main".
Kelas yang Sama, Tag yang Berbeda
Tag yang berbeda, seperti <h2> dan <p>, dapat memiliki nama kelas yang sama dan dengan demikian memiliki style yang sama:
Contoh:
<!DOCTYPE html>
<html>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<body>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>
<p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling.</p>
</body>
</html>
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2