Atribut kelas HTML
Atribut HTML classdigunakan untuk menentukan kelas untuk elemen HTML.
Beberapa elemen HTML dapat berbagi kelas yang sama.
Menggunakan Atribut kelas
Atribut classini sering digunakan untuk menunjuk ke nama kelas dalam style sheet. Itu juga dapat digunakan oleh JavaScript untuk mengakses dan memanipulasi elemen dengan nama kelas tertentu.
Dalam contoh berikut kita memiliki tiga <div>elemen dengan classatribut dengan nilai "kota". Ketiga <div>
elemen tersebut akan ditata sama sesuai dengan .city
definisi gaya di bagian kepala:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Dalam contoh berikut kita memiliki dua <span>elemen dengan classatribut dengan nilai "catatan". Kedua <span>
elemen akan ditata sama sesuai dengan .note
definisi gaya di bagian kepala:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Tip: Atribut classdapat digunakan pada elemen HTML apapun .
Catatan: Nama kelas peka huruf besar-kecil!
Tip: Anda dapat mempelajari lebih lanjut tentang CSS di Tutorial CSS kami .
Sintaks Untuk Kelas
Untuk membuat kelas; tulis karakter titik (.), diikuti dengan nama kelas. Kemudian, definisikan properti CSS di dalam kurung kurawal {}:
Contoh
Buat kelas bernama "kota":
<!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>
</body>
</html>
Beberapa Kelas
Elemen HTML dapat dimiliki lebih dari satu kelas.
Untuk mendefinisikan beberapa kelas, pisahkan nama kelas dengan spasi, misalnya <div class="city main">. Elemen akan ditata sesuai dengan semua kelas yang ditentukan.
Dalam contoh berikut, <h2>elemen pertama milik kedua
citykelas dan juga mainkelas, dan akan mendapatkan gaya CSS dari kedua kelas:
Contoh
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Elemen Berbeda Dapat Berbagi Kelas yang Sama
Elemen HTML yang berbeda dapat menunjuk ke nama kelas yang sama.
Dalam contoh berikut, keduanya <h2>dan <p>
menunjuk ke kelas "kota" dan akan berbagi gaya yang sama:
Contoh
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Penggunaan Atribut kelas dalam JavaScript
Nama kelas juga dapat digunakan oleh JavaScript untuk melakukan tugas tertentu untuk elemen tertentu.
JavaScript dapat mengakses elemen dengan nama kelas tertentu dengan getElementsByClassName()metode:
Contoh
Klik tombol untuk menyembunyikan semua elemen dengan nama kelas "kota":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Jangan khawatir jika Anda tidak memahami kode pada contoh di atas.
Anda akan mempelajari lebih lanjut tentang JavaScript di bab JavaScript HTML kami, atau Anda dapat mempelajari Tutorial JavaScript kami .
Ringkasan Bab
- Atribut HTML
classmenentukan satu atau lebih nama kelas untuk sebuah elemen - Kelas digunakan oleh CSS dan JavaScript untuk memilih dan mengakses elemen tertentu
- Atribut
classdapat digunakan pada elemen HTML apa pun - Nama kelas peka huruf besar-kecil
- Elemen HTML yang berbeda dapat menunjuk ke nama kelas yang sama
- JavaScript dapat mengakses elemen dengan nama kelas tertentu dengan
getElementsByClassName()metode