jQuery ile, elemanları ve tarayıcı penceresinin boyutları ile çalışmak kolaydır.
jQuery Boyut Yöntemleri
jQuery boyutları ile çalışmak için birkaç önemli yöntem vardır:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Boyutlar
jQuery width() ve height() Yöntemler
width() metodu kümeleri veya bir elemanın (hariç genişliğini döner padding, border ve margin ).
height() metodu kümeleri veya bir öğenin yüksekliği verir (excludes padding, border and margin ) .
Aşağıdaki örnek, belirtilen genişliğini ve yüksekliğini döner <div> öğesi:
Örnek
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
}); Kendin dene " jQuery innerWidth() ve innerHeight() Yöntemler
innerWidth() yöntemi, bir elemanın genişliği döner (includes padding ) .
innerHeight() yöntemi, bir elemanın yüksekliği verir (includes padding ) .
Aşağıdaki örnek, belirtilen iç-genişlik / yükseklik döner <div> öğesi:
Örnek
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
}); Kendin dene " jQuery outerWidth() ve outerHeight() Yöntemler
outerWidth() yöntemi, bir elemanın genişliği döner (içerir padding ve border ).
outerHeight() yöntemi, bir elemanın yüksekliği verir (içerir padding ve border ).
Aşağıdaki örnek, belirtilen dış genişlik / yükseklik döner <div> öğesi:
Örnek
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
}); Kendin dene " outerWidth(true) yöntemi, bir elemanın genişliği (içerir döner padding, border ve margin ).
outerHeight(true) yöntemi, bir elemanın yüksekliği (içerir döner padding, border ve margin ).
Örnek
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
}); Kendin dene " jQuery fazla width() ve height()
Aşağıdaki örnek, doküman (HTML belgesi) ve pencerenin genişlik ve yüksekliğinin döner (the browser viewport) :
Ö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);
}); Kendin dene " Aşağıdaki örnek, belirtilen genişliğini ve yüksekliğini ayarlar <div> öğesi:
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »
jQuery CSS Referansı
Tüm jQuery CSS yöntemlerin tamamını görmek için lütfen gidin lütfen jQuery HTML / CSS Referansı .