Halo sahabat bertemu lagi pada saya, beberapa minggu lalu saya sempat memabahs sebuah dimensions yang terdapat pada sebuah jquery, dan ternyata saya belum membahasnya semuanya ya, maka dari itu disini saya ingin melanjutkan dimensions lain yang terdapat pada jquery, untuk artikel kali ini saya ingin membahas fungsi dari outherWidth dan outherHeight di jquery, jika di antara teman-teman baru saja bergabung silahkan liat artikel saya tentang dimensions sebelumnnya, oke jangan kemana-mana simak terus ya.
Jadi fungsi dari outherWidth dan outherHeight di jquery, adalah untuk menghitung sebuah element, jika kemarin kita sudah membahas width, height, innerWidth dan innerHeight, dimana kemarin jika kita sudah sampai kepada inner berarti kita sudah bisa mengetahui lebar atau tinggi dan padding dari sebuah element, jadi fungsi dari outherWidth dan outherHeight di jquery adalah untuk menhitung kelanjutannya, yaitu biasanya setelah padding pasti ada border ya, jika teman-teman membuat bordernya, jadi dengan outher kita bisa menghitung berapa keseluruahan lebar atau tinggi berserta paddingnya sekaligus dari sebuah element, jika teman-teman merasa binggung silagkan lihat gambarnya saya sudah memberikan pada artikel pertama tentang dimensions ya, yaitu width dan height, oke sekarang kita lihat kodenya, supaya teman-teman juga bisa mencobannya:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <title>Fungsi dari outherWidth dan outherHeight di Jquery</title> <style> #div { height: 100px; width: 300px; padding: 10px; margin: 4px; border: 3px solid blue; background-color: lightblue; } .container{ width: 300px; margin: auto; } h1{ text-align: center; text-shadow: 5px 5px 5px blue; } </style> </head> <body> <div class="container"> <h1>Fungsi dari outherWidth dan outherHeight di Jquery</h1> <div id="div"></div> <br> <button>Klik untuk mengetahui Hasil</button> <p><strong>outerWidth()</strong> - Mengetahui lebar dari sebuah element (menghitung lebar padding dan border).</p> <p><strong>outerHeight()</strong> - Mengetahui Tinggi dari sebuah element (menghitung lebar padding dan border).</p> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var output = ""; output += "Lebar dari kotak biru ini: " + $("#div").width() + "</br>"; output += "Tinggi dari kotak biru ini: " + $("#div").height() + "</br>"; output += "Outer width dari kotak biru ini: " + $("#div").outerWidth() + "</br>"; output += "Outer height dari kotak biru ini: " + $("#div").outerHeight(); $("#div").html(output); }); }); </script> </div> </body> </html> |
Oke silahkan teman-teman copy, pelajari ya, apakah hasilnya akan sama seperti yang saya punya, jika tidak, silahkan komen di bawah ini, ini dia hasil yang saya punya:
Ketika saya mengetik buttonya, maka akan output di dalamnya, seperti gambar di atas, dan saya rasa cukup sampai disini belajar kita tentang fungsi dari outherWidth dan outherHeight di jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.