get attribute javascript vs jquery vs css

mengambil nilai dari attribute dengan javascript dan jquery dan css

Hallo semua pada kesempatan kali ini saya akan membagikan cara mencetak atau mengambil nilai dari attribute dengan javascript dan jquery dan css

ini adalah tutorial coding pertama saya, biasanya saya lebih sering membagikan tutorial widget yang sudah siap pakai yang hanya kalian copy paste saja.

saya membuat tutorial ini karena posisi saya sekarang lagi di kampung dan tidak membawa laptop jadi akan sulit jika ingin membuat widget maka itu saya putuskan untuk membuat tutorial ini karena sudah 1 minggu lebih blog ini belum update , dan artikel ini saya tulis hanya dengan hp saja.

Apa Itu Attribute?

attribute adalah kata kata khusus yang berada di dalam tag pembuka, seperti class dan id href dan lainnya itu di sebut dengan attribute.

selain itu kita juga dapat menambahkan attribute sendiri dengan kata atau nama apapun seperti data-end data-text dll bebas kita dapat menentukan nama apapun yang kita sukai.

berikut contoh attribute di bawah ini, yang saya tandai itulah yang di maksud dengan attribute.

<div class='iniClass' id='iniId' data-text='hello wendy'>belajar attribute</div>

Get Attribute Dengan Javascript

sekarang kita akan mencoba mencetak atau mengambil nilai yang berada di dalam attribute data-text yaitu hello wendy dengan javascript

//kita wajib seleksi class atau id yang berada di pebungkus yang sama dengan attribute yang ingin kita cetak

//di sini saya akan mengseleksi dengan id yaitu (iniId)

//buat variabel dengan nama apapun yang kalian suka, di sini saya memberi nama (variabelCetak)

var variabelCetak = document.querySelector('#iniId').getAttribute('data-text');

// sekarang kita cetak dengan alert cukup panggil variabel yang sudah kita buat di atas
alert(variabelCetak);
//hasil output hello wendy

Get Attribute Dengan Jquery

sekarang kita akan mencoba mencetak atau mengambil nilai yang berada di dalam attribute data-text yaitu hello wendy dengan jquery

//kita wajib seleksi class atau id yang berada di pebungkus yang sama dengan attribute yang ingin kita cetak

//di sini saya akan mengseleksi dengan id yaitu (iniId)

//buat variabel dengan nama apapun yang kalian suka, di sini saya memberi nama (variabelCetak)

var variabelCetak = $('#iniId').attr('data-text');

// sekarang kita cetak dengan alert cukup panggil variabel yang sudah kita buat di atas
alert(variabelCetak);
//hasil output hello wendy

Get Attribute Dengan Css

berbeda dengan javascript dan jquery kita bebas mencetak nilai attribute ke manapun yang kita sukai, sedangkan css ini hanya dapat kita cetak di pebungkus yang sama dengan menggunakan css before atau after.

.iniClass::after{
content:attr(data-text);
/* hasil output hello wendy */
}

tutorial ini hanyalah dasarnya saja sisanya kembali pada diri kalian sendiri bagaimana kalian mengkreasikannya sesuai kebutuhan, ok jadi sekian tutorial cara mencetak atau mengambil nilai dari attribute dengan javascript dan jquery dan css semoga bermanfaat.