Sebelum ini, saya sudah sering menggunakan class dalam contoh-contoh yang saya berikan. Class adalah salah satu atribut dalam HTML. Atribut class yang dimiliki elemen HTML bisa digunakan dalam CSS maupun javascript. Dalam HTML, satu elemen bisa memiliki beberapa nama class sekaligus. Nama class dipisahkan dengan spasi dalam nilai atribut class. Tentu saja, selector yang ada dalam atribut class harus selector class. Selector class adalah selector yang diawali dengan tanda titik (.). Misalnya :
Untuk mengecek keberadaan selector class, kita bisa menggunakan method contains yang terdapat dalam properti classList. Properti classList dimiliki oleh objek dari elemen HTML yang bisa didapat dengan document.getElementById atau method lain yang sejenis.
Properti classList memiliki beberapa method sebagai objeknya. Pada contoh kode HTML di atas kita sudah menggunakan method contains dalam scriptnya. Selain contains yang digunakan untuk mengecek keberadaan dari suatu selector class, method-method yang dimiliki classList yaitu :
Contoh di atas sudah menyertakan add dan remove. Untuk mencaritahu kegunaan toggle, silakan kalian coba sendiri.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
.class1{color:orange;}
.class2{background:green;}
.class3{font-weight:bold;font-style:italic;}
</STYLE>
</HEAD>
<BODY>
<H1 class="class1 class2">Judul</H1>
<p class="class1 class3">Ini cuma contoh. Coba kalian lihat nilai dari atribut class dalam kode HTML ini. Setiap atribut class dalam satu elemen bisa menggunakan beberapa selector CSS di dalam nilainya. Setiap selector dari class dipisahkan dengan spasi. </p>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
.class1{color:orange;}
.class2{background:green;}
.class3{font-weight:bold;font-style:italic;}
</STYLE>
</HEAD>
<BODY>
<H1 id="elemen1" class="class1 class2">Judul</H1>
<p id="elemen2"class="class1 class3">Ini cuma contoh. Coba kalian lihat nilai dari atribut class dalam kode HTML ini. Setiap atribut class dalam satu elemen bisa menggunakan beberapa selector CSS di dalam nilainya. Setiap selector dari class dipisahkan dengan spasi. </p>
<SCRIPT>
var e1=document.getElementById("elemen1");
var e2=document.getElementById("elemen2");
if(e1.classList.contains("class2"))alert("elemen1 punya class2");
if(!e2.classList.contains("class2"))alert("elemen2 tidak punya class2");
</SCRIPT>
</BODY>
</HTML>
- Add => Menambahkan selector class CSS ke dalam atribut class.
- Remove => Mengurangi selector class CSS di dalam atribut class.
- Toggle => Menambah atau mengurangi selector class CSS pada suatu elemen HTML tergantung keberadaan dari selector tersebut dalam atribut class. Jika selector yang dimaksud sudah ada, maka selector akan dihilangkan. Jika belum ada, maka selector akan ditambahkan.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<STYLE>
.class1{color:orange;}
.class2{background:green;}
.class3{font-weight:bold;font-style:italic;}
</STYLE>
</HEAD>
<BODY>
<H1 id="elemen1" class="class1 class2">Judul</H1>
<p id="elemen2"class="class1 class3">Ini cuma contoh. Coba kalian lihat nilai dari atribut class dalam kode HTML ini. Setiap atribut class dalam satu elemen bisa menggunakan beberapa selector CSS di dalam nilainya. Setiap selector dari class dipisahkan dengan spasi. </p>
<SCRIPT>
var e1=document.getElementById("elemen1");
var e2=document.getElementById("elemen2");
if(e1.classList.contains("class2")){
alert("elemen1 punya class2");
e1.classList.remove("class2");
e1.classList.add("class3");
};
</SCRIPT>
</BODY>
</HTML>