Cara Menampilkan Width dan Height dengan jQuery
Cinta itu macam musik yang indah. Bedanya, cinta sejati akan membuatmu tetap menari meskipun musiknya telah lama berhenti. Oke di kesempatan kali ini saya akan berbagi ilmu kepada kalian mengenai bagaimana Cara Menampilkan Width dan Height dengan jQuery.
Cara Menampilkan Width dan Height dengan jQuery ini menggunakan kegunaan yang dinamakan dengan InnerWidth dan InnerHeight. Hanya dengan kita membangun satu tombol itu dan memasukkan kegunaan InnerWidth dan InnerHeight ini karenanya akan menampilkan width dan height yang telah kita atur di CSS kita.
Oke seketika saja, berikut caranya.
Seperti biasanya, siapkan file index.html nya.
Kemudian, hubungkan dengan file HTML kita dengan library jQuery nya.
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>
Setelah itu, isi di bagian <body> tag-tag HTML berikut.
<div id=div1></div>
<br>
<button>Display dimensions of div</button>
<p>innerWidth() - returns the width of an element (includes padding).</p>
<p>innerHeight() - returns the height of an element (includes padding).</p>
Berikutnya, isi bagi bagian CSS nya.
<style>
#div1 {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
Dan yang terakhir, isi bagi Javascript nya.
<script>
$(document).ready(function(){
$(button).click(function(){
var txt = ;
txt += Width of div: + $(#div1).width() + </br>;
txt += Height of div: + $(#div1).height() + </br>;
txt += Inner width of div: + $(#div1).innerWidth() + </br>;
txt += Inner height of div: + $(#div1).innerHeight();
$(#div1).html(txt);
});
});
</script>
Bagaimana teman-teman? Lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai bagaimana Cara Menampilkan Width dan Height dengan jQuery.
Semoga bermanfaat, terima kasih.
Sumber https://kursuswebsite.org
