Cara Menggunakan Fungsi getAttribute Pada Javascript

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
     <title>Javascript.</title>
     <link rel="stylesheet" href="bootstrap.min.css">
<style>
     body {
         font-family: sans-serif;
         margin: 10%;
    }
</style>
</head>
<body>
     <button data-color="#34ace0" class="btn btn-default btn-sm">Summer Sky</button>
     <button data-color="#aaa69d" class="btn btn-default btn-sm">Hot Stone</button>
     <button data-color="#f3a683" class="btn btn-default btn-sm">Creamy Peach</button>
     <button data-color="#c44569" class="btn btn-default btn-sm">Deep Rose</button>
     <button data-color="red" class="btn btn-default btn-sm">Red</button>
     <button data-color="orange" class="btn btn-default btn-sm">Orange</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Javascript.</title>

<style>

body {

font-family: sans-serif;

margin: 10%;

}

</style>

</head>

<body>

<button data-color="#34ace0" class="btn btn-default btn-sm">Summer Sky</button>

<button data-color="#aaa69d" class="btn btn-default btn-sm">Hot Stone</button>

<button data-color="#f3a683" class="btn btn-default btn-sm">Creamy Peach</button>

<button data-color="orange" class="btn btn-default btn-sm">Orange</button>

</body>

</html>

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().

var elements = document.getElementsByClassName('btn');
for (i = 0; i < elements.length; ++i) {
     elements[i].addEventListener('click', output)
}

var elements = document.getElementsByClassName('btn');

for (i = 0; i < elements.length; ++i) {

elements[i].addEventListener('click', output)

}

Kemudian kita buat set atribut nya

function output() {
     document.body.style.backgroundColor = this.getAttribute('data-color');
}

function output() {

document.body.style.backgroundColor = this.getAttribute('data-color');

}

Jika sudah save dan jalankan pada browsernya, dan klik pada masing – masing button dengan begitu background body akan bergantian sesuai button yang di klik.

Baik, Sekian pada artikel kali ini tentang Cara Menggunakan Fungsi getAttribute Pada Javascript kita jumpa lagi di artikel yang akan datang tentunya dengan tips dan trik seputar dunia website. Terimakasih dan sampai jumpa.

Semoga bermanfaat.

Cara Menggunakan Fungsi getAttribute Pada Javascript

Facebook DUMET School

Categories