Halo teman – teman, selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan tips dan trik seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang
Cara Menggunakan Fungsi getAttribute Pada Javascript jika kita berbicara javascript seperti tidak ada habis nya ya 🙂 Karena sangat banyak sekali manfaatnya, terutama untuk DOM website. Nah kali ini masih berhubungan dengan DOM saya akan memanipulasi sebuat tag button, dimana di dalam nya terdapat data-color di masing – masing button
saya contohkan disini sebanyak 6 button saja dengan warna yang berbeda. Kemudian saya akan menggunakan fungsi getAttribute[] dan bagaimana cara kerjanya..?? Fungsi getAttribute[] akan mengembalikan nilai atribut tertentu pada elemen dalam hal ini data atribut data-color pada button. Jika atribut yang diberikan tidak
ada, nilai yang dikembalikan akan menjadi null atau “” [string kosong] yang artinya jika data atrubut di dalam tag html tidak ada maka tidak akan ditampilkan. Biar tidak bingung mari langsung saja kita implementasikan Cara Menggunakan Fungsi getAttribute Pada Javascript teman – teman siapkan text editornya dan ketikkan script html dan css nya di bawah
ini
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Javascript.
body { font-family:sans-serif;
margin:10%; } Summer Sky Hot Stone Creamy Peach Deep
Rose Red Orange
Saya menggunakan bootstrap 4 untuk membuat buttonnya, kemudian di dalam button saya berikan data-color yang akan di getAttribute[] pada object tertentu dalam hal ini saya ingin menampilkan pada body. Jika di klik salah satu button maka warna akan di kirimkan kepada body dan di set dengan css backgroundnya. Teman – teman save code di atas dengan nama index.html kemudian kita akan gunakan fungsi looping for untuk button nya dan fungsi addEventListener[].
varelements=document.getElementsByClassName['btn']; for[i=0;i Chủ Đề |