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 pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Menampilkan Width dan Height dengan jQuery.

Cara Menampilkan Width dan Height dengan jQuery ini menggunakan fungsi yang dinamakan dengan InnerWidth dan InnerHeight. Hanya dengan kita membuat satu tombol itu dan memasukkan fungsi InnerWidth dan InnerHeight ini maka akan menampilkan width dan height yang sudah kita atur pada CSS kita.
Oke langsung saja, berikut caranya.

Seperti biasa, 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>

Selanjutnya, isi untuk 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 untuk 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? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Menampilkan Width dan Height dengan jQuery.

Semoga bermanfaat, terima kasih.

Cara Menampilkan Width dan Height dengan jQuery

Kategori