jQuery Boyutları

jQuery ile, element ve tarayıcı penceresinin boyutlarını işlemek kolaydır.

jQuery Boyutları Yöntemleri

jQuery, önemli ölçüde boyutları işlemek için birçok yöntem sunar:

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

jQuery width() ve height() yöntemleri

width() yöntemi, elemanın genişliğini (dahil iç boşluk, çerçeve veya dış marj) döndürür.

height() yöntemi, elemanın yüksekliğini (dahil iç boşluk, çerçeve veya dış marj) döndürür.

Aşağıdaki örnek, belirlenen <div> elemanının genişlik ve yüksekliğini döndürür:

Örnek

$("button").click(function(){
  var txt="";
  txt += "Genişlik: " + $("#div1").width() + "</br>";
  txt += "Yükseklik: " + $("#div1").height();
  $("#div1").html(txt);
});

Deneyin

jQuery innerWidth() ve innerHeight() yöntemleri

innerWidth() yöntemi, elemanın genişliğini (dahil iç boşluk) döndürür.

innerHeight() yöntemi, elemanın yüksekliğini (dahil iç boşluk) döndürür.

Aşağıdaki örnek, belirlenen <div> elemanının inner-width/height'ini döndürür:

Örnek

$("button").click(function(){
  var txt="";
  txt += "İç genişlik: " + $("#div1").innerWidth() + "</br>";
  txt += "İç yükseklik: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

Deneyin

jQuery outerWidth() ve outerHeight() yöntemleri

outerWidth() yöntemi, iç dolgu ve çerçeve dahil olmak üzere elementin genişliğini döndürür.

outerHeight() yöntemi, iç dolgu ve çerçeve dahil olmak üzere elementin yüksekliğini döndürür.

Aşağıdaki örnekte, belirli <div> elementinin dış genişlik/yüksekliğini döndürüyoruz:

Örnek

$("button").click(function(){
  var txt="";
  txt+="Dış genişlik: " + $("#div1").outerWidth() + "</br>";
  txt+="Dış yükseklik: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

Deneyin

outerWidth(true) yöntemi, iç dolgu, çerçeve ve marj dahil olmak üzere elementin genişliğini döndürür.

outerHeight(true) yöntemi, iç dolgu, çerçeve ve marj dahil olmak üzere elementin yüksekliğini döndürür.

Örnek

$("button").click(function(){
  var txt="";
  txt+="Dış genişlik (+marj): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Dış yükseklik (+marj): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

Deneyin

jQuery - Daha fazla width() ve height()

Aşağıdaki örnekte, belge (HTML belgesi) ve pencere (tarayıcı görüntüleme penceresi) genişliğini ve yüksekliğini döndürüyoruz:

Örnek

$("button").click(function(){
  var txt="";
  txt+="Doküman genişliği/yüksekliği: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Pencere genişliği/yüksekliği: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

Deneyin

Aşağıdaki örnekte, belirli <div> elementinin genişliğini ve yüksekliğini ayarlıyoruz:

Örnek

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

Deneyin

jQuery CSS Referans Kılavuzu

jQuery Dimensions hakkında tam referans için, referans kılavuzumuza göz atın.