Baca Atribut Data HTML5 melalui jQuery

1 41

Di HTML5, ia memiliki atribut data- * yang digunakan untuk menyimpan data khusus dengan elemen HTML. Atribut ini digunakan untuk menyimpan lebih banyak informasi tentang elemen HTML. Ketika kita mengakses elemen-elemen ini dari javascript, informasi yang tersimpan akan mempermudah pekerjaan kita.

Kita akan melihat contoh untuk membaca atribut HTML5 data- * via jQuery. Dalam contoh ini tag HTML <img> memiliki atribut data- *. Kami membaca atribut ini untuk melakukan zoom-in dan zoom out operations.

Kode HTML dengan Atribut Data

Kode ini berisi dua atribut data, data-action, dan data-imgname. Data-action digunakan untuk menyimpan action (zoom-in, zoom out) yang akan dilakukan. Dan data-imgname digunakan untuk menyimpan nama nama gambar yang akan ditampilkan setelah operasi zoom. Kode itu,

<img class="demo-image" src="photo_thumbnail.jpg" 
	title="Zoom In" 
	data-action="zoom-in" 
	data-imgname="photo_enlarge.jpg" />

Akses Atribut Data jQuery

Kami mengakses atribut data-action dari jQuery. Berdasarkan data-action value zoom in dan zoom out akan terjadi. Selama operasi ini, kami menggunakan nilai data-imgname untuk mengubah gambar. Naskahnya adalah,

<script type="text/javascript">
	$(".demo-image").click( function() {
		var currentImage = $(this).attr("src");
		var action = $(this).data("action");
		$(this).attr("src", $(this).data("imgname"));
		$(this).data("imgname", currentImage);
		if(action=="zoom-in") {
			$(this).attr("title","Zoom Out");
			$(this).data("action","zoom-out");
			$(this).css("cursor", "-webkit-zoom-out");
		} else {
			$(this).attr("title","Zoom In");
			$(this).data("action","zoom-in");
			$(this).css("cursor", "-webkit-zoom-in");
		}
	});
</script>
Demo

Get real time updates directly on you device, subscribe now.

1 Comment
  1. […] menentukan prioritas responsif saat menginisialisasi Datatables. Kita juga bisa menggunakan data atribut data HTML5 prioritas untuk menentukan prioritas kustom ke […]

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.