Ukuran jQuery

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

Metode Ukuran jQuery

jQuery menyediakan berbagai metode penting untuk mengatur ukuran:

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

Metode width() dan height() jQuery

Metode width() menetapkan atau mengembalikan lebar elemen (tidak termasuk marjin dalaman, bingkai, atau marjin luar).

Metode height() menetapkan atau mengembalikan tinggi elemen (tidak termasuk marjin dalaman, bingkai, atau marjin luar).

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 dalaman).

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

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

Contoh

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

Coba sendiri

Metode jQuery outerWidth() dan outerHeight()

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

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

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

Contoh

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

Coba sendiri

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

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

Contoh

$("button").click(function(){
  var txt="";
  txt+=\"Lebar luar (+margin): \" + $("#div1").outerWidth(true) + \"</br>\";
  txt+=\"Lebar tinggi luar (+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 mengatur lebar dan tinggi elemen <div> yang ditentukan:

Contoh

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

Coba sendiri

Panduan Referensi jQuery CSS

Untuk referensi penuh tentang jQuery Dimensions, silakan kunjungi panduan ukuran jQuery kami.