Halo teman-teman?masih semangat, kita lanjut lagi belajarnya, kali ini pembahasan kita tentang jquery yaitu fungsi .height() dan pada kasus kali ini kita akan belajar bagaimana cara menghitung tinggi suatu element dengan fungsi .height pada jquery.
Seperti yang tadi saya katakan, fungsi .height pada jquery adalah menghitung tinggi dari suatu selektor yang kita tentukan, nah mungkin untuk lebih jelasnya kita langsung saja praktekan, pertama silahakan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:red;"></div><br> <button>tinggi element ini adalah</button> </body> </html> |
script diatas saya membuat sebuah div yang saya berikan style inline, lalu saya membuat sebuahj tombol, nah sekarang kita masuk pada bagaian scripting jquerynya, teman-teman silahkan tambahkan script brikut ini pada bagian head dari htmlnya,
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $("button").click(function(){ alert("tinggi kotak ini adalah: " + $("div").height()); }); }); </script> |
Pada scripting jquery ini saya membuat sebuah fungsi ketika button di klik maka akan menjalankan fungsi alert diaman alert itu mengukur tinggi pada welement div yang kita buat tadi, namun sebelum itu teman-teman harus menyisipkan core dari jquery yang diambil dari website resmi jquery yakni jquery.com
teman-teman harus tambahkan script berikut ini di bagian head di html:
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
Saya memanggil library jquery ini secara online,
Kelengkapan keseluruhan script nya adalah seperti berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ alert("tinggi kotak ini adalah: " + $("div").height()); }); }); </script> </head> <body> <div style="height:150px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:red;"></div><br> <button>tinggi element ini adalah</button> </body> </html> |
Jadi jika teman-teman save dan jalankan pada broser hasilnya akan seperti brikut ini:
Jika teman-teman klik tombolnya maka hasilnya akan seperti berikut ini:
Gimana teman-teman cukup mudah bukan? saya rasa untuk tutorial kali ini tentang menghitung tinggi suatu element dengan fungsi .height pada jquery cukup sampai disini dulu, semoga tutorial yang singkat kali ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,
Terima kasih.