jQuery - Rozměry
S jQuery je snadné pracovat s rozměry prvků a okna prohlížeče.
Metody dimenzí jQuery
jQuery má několik důležitých metod pro práci s dimenzemi:
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
Rozměry jQuery
Metody jQuery width() a height().
Metoda width()nastavuje nebo vrací šířku prvku (nezahrnuje výplň, okraj a okraj).
Metoda height()nastavuje nebo vrací výšku prvku (nezahrnuje výplň, okraj a okraj).
Následující příklad vrátí šířku a výšku zadaného <div>
prvku:
Příklad
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
Metody jQuery innerWidth() a innerHeight().
Metoda innerWidth()vrací šířku prvku (včetně odsazení).
Metoda innerHeight()vrací výšku prvku (včetně odsazení).
Následující příklad vrátí vnitřní šířku/výšku zadaného <div>
prvku:
Příklad
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
Metody jQuery externalWidth() a externalHeight().
Metoda outerWidth()vrací šířku prvku (včetně odsazení a ohraničení).
Metoda outerHeight()vrací výšku prvku (včetně odsazení a ohraničení).
Následující příklad vrátí vnější šířku/výšku zadaného <div>
prvku:
Příklad
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
Metoda outerWidth(true)vrací šířku prvku (včetně odsazení, ohraničení a okraje).
Metoda outerHeight(true)vrací výšku prvku (včetně odsazení, ohraničení a okraje).
Příklad
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery Více width() a height()
Následující příklad vrátí šířku a výšku dokumentu (dokument HTML) a okno (výřez prohlížeče):
Příklad
$("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);
});
Následující příklad nastavuje šířku a výšku zadaného <div>
prvku:
Příklad
$("button").click(function(){
$("#div1").width(500).height(500);
});
Cvičení jQuery
Reference CSS jQuery
Úplný přehled všech metod jQuery CSS najdete v naší referenční příručce HTML/CSS jQuery .