Z jQuery, nie jest łatwo pracować z wymiarami elementów i okna przeglądarki.
Metody wymiarowania jQuery
jQuery ma kilka ważnych metod pracy z wymiarami:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Wymiary
jQuery width() i height() Metody
Na width() określa metody lub zwraca szerokość elementu (wyklucza padding, border i margin ).
Na height() określa metody lub zwraca wysokość elementu (wyklucza padding, border i margin ).
Poniższy przykład zwraca szerokość i wysokość określoną <div> element:
Przykład
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
}); Spróbuj sam " jQuery innerWidth() i innerHeight() Metody
innerWidth() Metoda zwraca szerokość elementu (zawiera padding ).
innerHeight() metoda zwraca wysokość elementu (zawiera padding ).
Poniższy przykład zwraca wewnętrznej szerokości / wysokości określonej <div> element:
Przykład
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
}); Spróbuj sam " jQuery outerWidth() i outerHeight() Metody
outerWidth() Metoda zwraca szerokość elementu (zawiera padding i border ).
outerHeight() metoda zwraca wysokość elementu (zawiera padding i border ).
Poniższy przykład zwraca zewnętrzną szerokość / wysokość określoną <div> element:
Przykład
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
}); Spróbuj sam " outerWidth(true) metoda zwraca szerokość elementu (zawiera padding, border i margin ).
outerHeight(true) metoda zwraca wysokość elementu (zawiera padding, border i margin ).
Przykład
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
}); Spróbuj sam " Więcej jQuery width() i height()
Poniższy przykład zwraca szerokość i wysokość dokumentu (dokument HTML) i okna (rzutni przeglądarki):
Przykład
$("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);
}); Spróbuj sam " Poniższy przykład ustawia szerokość i wysokość określoną <div> element:
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
jQuery CSS
Aby uzyskać pełny przegląd wszystkich metod jQuery CSS, przejdź do naszej jQuery HTML / CSS .