Pada kesempatan kali ini saya akan menjelaskan cara menggunakan method offset() jquery. Perlu teman-teman ketahui sebelumnya, Method offset() di javascript bisa teman-teman gunakan untuk mengatur atau mengembalikan nilai koordinat offset untuk element yang tentukan dan relatif terhadap dokumen. Method ini dapat mengembalikan koordinat offset elemen yang cocok. Dan mengembalikan objek dengan 2 properti, diantaranya posisi atas dan kiri dalam satuan pixel.
Berikut Tahapannya :
- Teman-teman buat terlebih dahulu satu buah file dengan nama index.html
- Jika sudah selanjutnya ketikan kode seperti berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menggunakan Method offset() Jquery</title>
</head>
<style>
*{padding: 0; margin:0;}
.kotak{
width: 400px;
height: 350px;
padding: 20px;
background: red;
color: #fff;
margin:30px auto;
}
button{
display: block;
margin: auto;
padding: 15px;
margin-top: 20px;
}
</style>
<body>
<div class="kotak">Cara Menggunakan Method offset() Jquery</div>
<button>Klik</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $(".kotak").offset();
alert("Element Top: " + x.top + "and Left: " + x.left);
});
});
</script>
</html>
- Jika sudah selanjutnya kalian simpan terlebih dahulu file index.html tersebut, dan lihat hasilnya dibrowser kesayangan teman-teman.
Sampai disini penjelasan saya mengenai cara menggunakan method offset() jquery, semoga bermanfaat.