Cara Manipulasi Dimensi dengan JQuery

28/04/2020    Maykhel David    1390    Website

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

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.

No data.