Cara Manipulasi Dimensi dengan JQuery

Cara Manipulasi Dimensi dengan JQuery - Hallo Semuanya, library jQuery mencakup berbagai metode untuk memanipulasi dimensi elemen DOM seperti tinggi, lebar, offset, posisi, dll. Pada artikel kali ini saya akan membuat sebuah daftar yang bisa kalian simpan sebagai referensi untuk bagaimana cara manipulasi dimensi menggunakan jquery. Mengatur dimensi menggunakan css sendiri sudah bisa dibilang cukup powerful, tetapi untuk mendapatkan interaksi secara sempurna kita memerlukan Bahasa program seperti Javascript, pada kali ini kita akan menggunakan JQuery sebagai framework javascript yang sangat powerful.
Berikut adalah daftar Method manipulasi Dimensi dengan JQuery

Manipulasi Dimensi dengan JQuery


1.    Method height()
Method height() ini memiliki fungsi untuk mendapatkan dan menentukan tinggi elemen tertentu

Contoh:

// mendapatkan nilai
$('#myDiv').height();
$('p').height();

// menentukan nilai
$('div').height(100);

<div id="myDiv" >
    ini sebuah tag div
</div>

<p>
    ini sebuah paragraf
</p>


2.    Method innerHeight()
Method innerHeight() ini memiliki fungsi untuk mendapatkan dan menentukan tinggi  + padding elemen tertentu

3.    Method outerHeight()
Method innerHeight() ini memiliki fungsi untuk mendapatkan dan menentukan tinggi  + padding + border elemen tertentu

4.    Method width()
Method width() ini memiliki fungsi untuk mendapatkan dan menentukan lebar elemen tertentu

Contoh:

// mendapatkan nilai width
$('#myDiv').width();
$('p').width();

// menentukan width
$('div').width(100);

<div id="myDiv" >
    ini sebuah tag div
</div>

<p>
    ini sebuah paragraf
</p>

5.    Method innerWidth()
Method innerWidth() ini memiliki fungsi untuk mendapatkan dan menentukan lebar + padding elemen tertentu

6.    Method outerWidth()
Method outerWidth() ini memiliki fungsi untuk mendapatkan dan menentukan lebar + padding + border elemen tertentu

7.    Method offset()
Method offset() ini memiliki fungsi untuk mendapatkan atau menentukan posisi koordinat kiri dan atas pada sebuah elemen

Contoh :

var ofs = $('#myDiv').offset();
alert('left:' + ofs.left + ', top: ' + ofs.top);

$('p').offset({ left:100, top:200});

<div id="myDiv" >
    ini sebuah tag div
</div>

<p>
    ini sebuah paragraf.
</p>


Baiklah semuanya, dengan daftar metode yang bisa digunakan pada jquery diatas, kalian sudah bisa memanipulasi bentuk dan ukuran sebuah elemen, demikian artikel kali ini yang membahas tentang beberapa cara memanipulasi dimensi elemen menggunakan jquery.

28 April 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat