jQuery .width() dan .height()
Tabel Konten
.width() dan .height() digunakan untuk mendapatkan data lebar dan tinggi elemen terpilih, atau sekedar mendeklarasikan tinggi dan lebar elemen dengan jQuery.
Dasar penggunaan
Kode di bawah ini akan menyimpan data lebar elemen #mainbox
ke dalam variabel boxWidth
dan akan menyimpan tinggi #mainbox
ke dalam variabel boxHeight
:
var boxWidth = $('#mainbox').width();
var boxHeight = $('#mainbox').height();
Contoh Penerapan: Menyamakan Lebar dan Tinggi Elemen
Kode di bawah ini akan membuat lebar dan tinggi elemen .box
sama dengan lebar dan tinggi elemen #mainbox
:
HTML
<div id='mainbox'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div style='clear:both;'></div>
CSS
#mainbox {
width:200px;
height:50px;
background-color:green;
margin:10px 10px;
}
.box {
background-color:black;
margin:10px 10px;
float:left;
/* tinggi dan lebar elemen ini akan dibuat di dalam JavaScript */
}
jQuery
var boxWidth = $('#mainbox').width(),
boxHeight = $('#mainbox').height();
$('.box').css({
width: boxWidth,
height: boxHeight
});
Contoh Penerapan: Menyatakan Lebar dan Tinggi Elemen
Kode di bawah ini akan menuliskan nilai lebar dan tinggi elemen #mainbox
ke dalam kotak dialog:
HTML
<div style='width:200px;height:300px;'></div>
<div style='width:30px;height:200px;'></div>
Dan seterusnya...
CSS
div {
background-color:black;
margin:10px;
}
jQuery
$('div').click(function() {
var boxWidth = $(this).width(),
boxHeight = $(this).height();
alert('Lebar kotak = ' + boxWidth + ' piksel, Tinggi kotak = ' + boxHeight + ' piksel');
});
Menyatakan Tinggi dan Lebar Elemen Secara Langsung
Kode di bawah ini akan mengeset ukuran tinggi #mainbox
sebesar 500 piksel dan lebar sebesar 400 piksel:
$('#mainbox').height(500).width(400);