Estimasi Waktu Baca: 6 menit Show
PemanasanPada artikel sebelumnya kita dapat menentukan dan mengatur style dari suatu elemen dengan mengacu pada jenis elemennya. Namun ada masalah di sini, bagaimana jika hanya elemen tertentu yang memiliki style berbeda dari yang lain dan bagaimana juga bila style yang sama dapat diterapkan di berbagai elemen? Nah di sinilah peran dari atribut id dan class dibutuhkan. Untuk mengetahui fungsi dari kedua atribut ini mari simak pembahasan berikut. Mengenal Id di HTMLAtribut id berfungsi untuk menentukan identitas unik suatu elemen. Jadi nilai yang diberikan haruslah unik, unik di sini artinya kita tidak diizinkan membuat lebih dari satu id dengan nilai yang sama. Atribut id sering digunakan untuk menunjuk ke nama id pada lembar gaya (style sheet). Hal ini juga dapat digunakan Javascript untuk mengakses dan memanipulasi elemen dengan nama id tertentu. Cara mendefinisikan style untuk id tertentu adalah dengan menjadikannya sebagai selector menggunakan tanda pagar atau hash (#) diikuti dengan nama atau nilai dari atribut id. Untuk lebih jelasnya lihat contoh penerapan berikut
Keluaran: Membuat Bookmark dengan Id dan LinkBookmark memungkinkan pembaca untuk lompat menuju bagian tertentu pada halaman website. Bookmark akan sangat berguna dan wajib hukumnya bila halaman website yang kita buat terlampau panjang. Contoh penerapan:
Keluaran: Menggunakan Id pada JavascriptSelain digunakan sebagai penanda suatu elemen untuk menentukan style tertentu padanya. Atribut id juga sering digunakan sebagai penanda elemen yang nantinya elemen terkait akan dapat diakses dan dimanipulasi oleh Javascript. Javascript dapat mengakses elemen dengan id tertentu menggunakan fungsi getElementById().
Keluaran Mengenal Class di HTMLAtribut class berfungsi untuk menentukan nama class dari suatu elemen. Berbeda dengan id yang bersifat unik, class diperbolehkan untuk digunakan oleh lebih dari satu elemen yang ditandainya. Atribut class juga sering digunakan untuk menunjuk ke nama class pada lembar gaya (style sheet). Hal ini juga dapat digunakan Javascript untuk mengakses dan memanipulasi elemen dengan nama class tertentu. Cara mendefinisikan style untuk class tertentu adalah dengan menjadikannya sebagai selector menggunakan tanda titik atau dot (.) diikuti dengan nama atau nilai dari atribut class.
Keluaran: Berbagi Class yang SamaKarena kelas tidak bersifat unik maka kita diizinkan untuk menentukan banyak class dengan nilai yang sama untuk banyak elemen dalam dokumen HTML.
Keluaran: Menentukan Banyak Class dalam Satu ElemenKita diperbolehkan untuk menentukan lebih dari satu nilai atau nama class yang berbeda dalam satu elemen.
Keluaran: Menggunakan Class pada JavascriptSelain digunakan sebagai penanda suatu elemen untuk menentukan style tertentu padanya. Atribut class juga sering digunakan sebagai penanda elemen yang nantinya elemen terkait akan dapat diakses dan dimanipulasi oleh Javascript. Javascript dapat mengakses elemen dengan class tertentu menggunakan fungsi getElementsByClassName().
Keluaran: Apa itu CSS class?Class adalah style dari CSS yang bisa digunakan untuk beberapa elemen, dengan adanya class ini memungkinkan anda untuk merubah beberapa objek pada html dengan settingan yang sama, dengan menuliskan satu perintah saja, class diawali dengan tanda titik (.).
Apa fungsi Selector dan class dalam CSS?Class selector digunakan untuk memilih elemen HTML dengan class atribut tertentu. Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), diikuti dengan nama class. Contoh : pada contoh kali semua elemen HTML dengan class=”center” akan berwarna merah dan rata tengah.
Apa fungsi class pada HTML?Mengenal Class di HTML
Atribut class berfungsi untuk menentukan nama class dari suatu elemen. Berbeda dengan id yang bersifat unik, class diperbolehkan untuk digunakan oleh lebih dari satu elemen yang ditandainya. Atribut class juga sering digunakan untuk menunjuk ke nama class pada lembar gaya (style sheet).
Apa perbedaan ID dan class?Perbedaan antara keduanya adalah: atribut id bersifat unik, nama id tidak boleh dipakai lebih dari satu kali di dalam satu halaman HTML. sedangkan nilai dari atribut class bisa digunakan berkali-kali.
|