Fungsi dari Method innerWidth and innerHeight di dalam Jquery

Kedua method itu masih ada hubungan dengan artikel yang kemarin jadi pada hari ini kita akan membahas lanjutan dari artikel kemarin yaitu tentang Fungsi dari Method innerWidth and innerHeight di dalam Jquery, jadi jika teman-teman yang baru saja bergabung, bisa lihat terlebih dahulu artikel saya tentang dimensions, karena disitu ada method width() dan height() yang sudah saya bahas, jika teman-teman sudah paham, teman-teman bisa langsung mengikuti pembahasn kita tentang method innerWidth() dan innerHeight(), oke jangan kemana-mana simak terus ya.

Oke Fungsi dari Method innerWidth and innerHeight di dalam Jquery, adalah untuk mengetahui sebuah lebar dan tinggi sebuah elemen, di dalam sebuah konten website, jadi dimana nanti kita akan membutuhkan sebuah lebar dan tinggi sebuah element, kita bisa menggunakan ini, misal kita ingin menampilkan sebuah konten setelah lebar dan tinggi dari element ini seperti itu, oiya methid innerWidth dan innerHeight adalah lapisan luar setelah width dan height ya teman-teman, jadi sebelumnya kita telah membahas width dan height itu adalah lebar dan tinggi asli dari sebuah element tetapi jika innerWidth dan innerHeight akan menghitung jumlah paddingnya juga, jika kita memberikan sebuah padding juga di sebuah element itu, seperti itu akan bisa di hitung dengan menggunakan method innerWidth() dan innerHeight(), oke bagaimana cara menggunakannya coba perhatikan stuktur HTML dan kode Jquery Berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Fungsi dari Method innerWidth and innerHeight di dalam Jquery</title>
<style>
    #div1 {
        height: 100px;
        width: 300px;
        padding: 10px;
        margin: 3px;
        border: 1px solid blue;
        background-color: lightblue;
    }
    </style>
</head>
<body>

<div id="div1"></div>
<br>

<button>Display dimensions of div</button>
<h1> Fungsi dari Method innerWidth and innerHeight di dalam Jquery</h1>
<p>innerWidth() - akan menghitung lebar dari sebuah element yang sudah kita berikan padding.</p>
<p>innerHeight() - akan menghitung Tinggi dari sebuah element yang sudah kita berikan padding.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
</body>
</html>

Dengan artikel kemarin saya tinggal menambah sedikit ya, di jquerynya, oke bagimana hasilnya seperti ini:

sudah bisa di lihat ya, jika teman-teman lihat ada saya sudah memberikan padding di css, dan bisa di lihat padding pun ikut terhitung ya, Saya rasa cukup sampai disini pembahasan kita mengenai Fungsi dari Method innerWidth and innerHeight di dalam Jquery, dan pada artikel selanjutnya saya akan melanjutkan method yang ada di dimensions, oke terimakasih semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.