Atribut class HTML digunakan untuk menentukan kelas untuk elemen HTML. Beberapa elemen HTML dapat berbagi kelas yang sama.
Section Artikel
Atribut Class
Atribut class sering digunakan untuk menunjuk ke nama kelas di style sheet. Atribut class juga digunakan oleh JavaScript untuk mengakses dan memanipulasi elemen dengan nama kelas tertentu.
Contoh di bawah ini, kita memiliki tiga elemen <div> dengan atribut class yang memilki nilai “kota”. Ketiga elemen <div> ini akan kita tata sesuai dengan definisi style .kota di bagian head:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.kota {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="kota">
<h2>Jakarta</h2>
<p>Ibu Kota Negara Indonesia.</p>
</div>
<div class="kota">
<h2>Paris</h2>
<p>Ibu Kota Negara Perancis.</p>
</div>
<div class="kota">
<h2>Seoul</h2>
<p>Ibu Kota Negara Korea Selatan.</p>
</div>
</body>
</html>Dalam contoh selanjutnya kita memiliki dua elemen <span> dengan atribut class yang memiliki nilai “note”. Kedua elemen <span> ini akan kita tata sesuai dengan definisi style .note di bagian head:
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>Ini adalah <span class="note">sebuah </span> text.</p>
</body>
</html>
Tip: Atribut class bisa digunakan untuk seluruh elemen HTML.
Catatan: nama atribut class, case sensitive(peka huruf)!
Sintaks- Class
Cara membuat Class
- Menuliskan karakter titik (.),
- diikuti dengan menuliskan nama kelas.
- Kemudian, tentukan properti CSS di dalam kurung kurawal {}:
Contoh
Buat class bernama “kota”:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">Jakarta</h2>
<p>Jakarta ibu kota negara Indonesia.</p>
<h2 class="city">Paris</h2>
<p>Paris ibu kota negara Perancis.</p>
<h2 class="city">Seoul</h2>
<p>Seoul ibu kota negara Korea Selatan.</p>
</body>
</html>Multiple Class
Elemen HTML dapat dimiliki oleh lebih dari satu kelas. Untuk menentukan banyak kelas, lakukan dengan memisahkan nama kelas dengan spasi, mis. <div class=”city main”> . Elemen HTML akan diberi style sesuai dengan semua kelas yang ditentukan.
Dalam contoh berikut, elemen <h2> pertama milik class kota dan juga class utama dan elemen <h2> akan mendapatan atribut style CSS dari kedua kelas diatasnya.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.kota {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>Berikut ini contoh multiple class.</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
Beda Elemen dalam Class yang sama
Elemen HTML yang berbeda dapat mengarah ke nama kelas yang sama.
Pada contoh berikut, <h2> dan <p> menunjuk ke kelas “kota” dan akan menggunakan style yang sama:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.kota {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>BEda elemen dengan sama kelas</h2>
<p>meskipun kedua elemen berikut berbeda tag, tetapi keduanya bisa diberi style yang sama</p>
<h2 class="city">Jakarta</h2>
<p class="city">Jakarta adalah ibu kota negara Indonesia</p>
</body>
</html>
Penggunaan Atribut Class dalam JavaScript
Nama class juga dapat digunakan oleh JavaScript untuk melakukan tugas tertentu untuk elemen tertentu.
JavaScript dapat mengakses elemen dengan nama kelas tertentu dengan metode getElementsByClassName ():
Contoh
Klik pada tombol untuk menyembunyikan semua elemen dengan nama kelas “kota”:
<!DOCTYPE html>
<html>
<body>
<h2>Atribut Class pada Javascript</h2>
<p> klik button untuk menyembunyikan semua elemen yang memiliki atribut class bernilai "kota" :</p>
<button onclick="myFunction()">Sembunyikan elements</button>
<h2 class="city">Jakarta</h2>
<p>Jakarta ibu kota negara Indonesia.</p>
<h2 class="city">Paris</h2>
<p>Paris ibu kota negara Perancis.</p>
<h2 class="city">Seoul</h2>
<p>Seoul ibu kota negara Korea Selatan.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
Rangkuman
- Atribut class HTML menentukan satu atau lebih nama kelas untuk sebuah elemen
- Class juga bisa digunakan oleh CSS dan JavaScript untuk memilih dan mengakses elemen tertentu
- Atribut class dapat digunakan untuk semua elemen HTML
- Nama class peka case sensitive(peka huruf)
- Elemen HTML yang berbeda dapat mengarah ke nama kelas yang sama
- JavaScript bisa mengakses elemen dengan nama kelas tertentu dengan metode
getElementsByClassName ()
