jQuery - Boyutlar
jQuery ile elementlerin boyutları ve tarayıcı penceresi ile çalışmak kolaydır.
jQuery Boyut Yöntemleri
jQuery, boyutlarla çalışmak için birkaç önemli yönteme sahiptir:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQuery Boyutları
jQuery genişlik() ve yükseklik() Yöntemleri
Yöntem width(), bir öğenin genişliğini ayarlar veya döndürür (dolgu, kenarlık ve kenar boşluğu hariç).
Yöntem height(), bir öğenin yüksekliğini ayarlar veya döndürür (dolgu, kenarlık ve kenar boşluğu hariç).
Aşağıdaki örnek, belirtilen bir <div>
öğenin genişliğini ve yüksekliğini döndürür:
Örnek
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth() ve innerHeight() Yöntemleri
Yöntem innerWidth(), bir öğenin genişliğini döndürür (dolgu içerir).
Yöntem innerHeight(), bir öğenin yüksekliğini döndürür (dolgu içerir).
Aşağıdaki örnek, belirtilen bir <div>
öğenin iç genişliğini/yüksekliğini döndürür:
Örnek
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery externalWidth() ve externalHeight() Yöntemleri
Yöntem outerWidth(), bir öğenin genişliğini döndürür (dolgu ve kenarlık içerir).
Yöntem outerHeight(), bir öğenin yüksekliğini döndürür (dolgu ve kenarlık içerir).
Aşağıdaki örnek, belirtilen bir <div>
öğenin dış genişliğini/yüksekliğini döndürür:
Örnek
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
Yöntem outerWidth(true), bir öğenin genişliğini döndürür (dolgu, kenarlık ve kenar boşluğu içerir).
Yöntem outerHeight(true), bir öğenin yüksekliğini döndürür (dolgu, kenarlık ve kenar boşluğu içerir).
Örnek
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery Daha fazla genişlik() ve yükseklik()
Aşağıdaki örnek, belgenin (HTML belgesi) ve pencerenin (tarayıcı görünüm alanı) genişliğini ve yüksekliğini döndürür:
Örnek
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
Aşağıdaki örnek, belirtilen bir <div>
öğenin genişliğini ve yüksekliğini ayarlar:
Örnek
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery Alıştırmaları
jQuery CSS Referansı
Tüm jQuery CSS yöntemlerine tam bir genel bakış için lütfen jQuery HTML/CSS Referansımıza gidin .