Ukuran jQuery

Dengan jQuery, dengan mudah mengatur ukuran elemen dan jendela browser.

Metode Ukuran jQuery

jQuery menyediakan berbagai metode penting untuk pengaturan ukuran:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

Metode width() dan height() jQuery

Metode width() mengatur atau mengembalikan lebar elemen (tidak termasuk marjin internal, border, atau marjin eksternal).

Metode height() mengatur atau mengembalikan tinggi elemen (tidak termasuk marjin internal, border, atau marjin eksternal).

Contoh di bawah ini mengembalikan lebar dan tinggi elemen <div> yang ditentukan:

Contoh

$("button").click(function(){
  var txt="";
  txt += "Lebar: " + $("#div1").width() + "</br>";
  txt += "Tinggi: " + $("#div1").height();
  $("#div1").html(txt);
);

Coba sendiri

Metode innerWidth() dan innerHeight() jQuery

Metode innerWidth() mengembalikan lebar elemen (termasuk marjin internal).

Metode innerHeight() mengembalikan tinggi elemen (termasuk marjin internal).

Contoh di bawah ini mengembalikan lebar dan tinggi internal elemen <div> yang ditentukan:

Contoh

$("button").click(function(){
  var txt="";
  txt += "Lebar internal: " + $("#div1").innerWidth() + "</br>";
  txt += "Tinggi internal: " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

Coba sendiri

Metode jQuery outerWidth() dan outerHeight()

Metode outerWidth() mengembalikan lebar elemen (termasuk marjin dalam dan garis).

Metode outerHeight() mengembalikan tinggi elemen (termasuk marjin dalam dan garis).

Contoh di bawah ini mengembalikan outer-width/height elemen <div> yang ditentukan:

Contoh

$("button").click(function(){
  var txt="";
  txt+="Lebar ekor: " + $("#div1").outerWidth() + "</br>";
  txt+="Tinggi ekor: " + $("#div1").outerHeight();
  $("#div1").html(txt);
);

Coba sendiri

Metode outerWidth(true) mengembalikan lebar elemen (termasuk marjin dalam, garis dan marjin luar).

Metode outerHeight(true) mengembalikan tinggi elemen (termasuk marjin dalam, garis dan marjin luar).

Contoh

$("button").click(function(){
  var txt="";
  txt+="Lebar ekor (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Lebar ekor (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
);

Coba sendiri

jQuery - Lebih banyak width() dan height()

Contoh di bawah ini mengembalikan lebar dan tinggi dokumen (dokumen HTML) dan window (viewport peramban):

Contoh

$("button").click(function(){
  var txt="";
  txt+="Lebar/tinggi dokumen: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Lebar/tinggi window: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
);

Coba sendiri

Contoh di bawah ini menata lebar dan tinggi elemen <div> yang ditentukan:

Contoh

$("button").click(function(){
  $("#div1").width(500).height(500);
);

Coba sendiri

Pustaka referensi jQuery CSS

Untuk referensi lengkap tentang jQuery Dimensions, kunjungi pustaka referensi ukuran jQuery kami.