Cu jQuery, este ușor de a lucra cu dimensiunile elementelor și fereastra browser-ului.
jQuery Dimensiune Metode
jQuery are mai multe metode importante pentru lucrul cu dimensiuni:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Dimensiuni
jQuery width() și height() Metode
De width() seturi de metode sau returnează lățimea unui element (exclude padding, border și margin ).
La height() seturi de metode sau returnează înălțimea unui element (excludes padding, border and margin ) .
Exemplul următor returnează lățimea și înălțimea unui specificat <div> Element:
Exemplu
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
}); Încearcă - l singur » jQuery innerWidth() și innerHeight() Metode
innerWidth() Metoda returnează lățimea unui element (includes padding ) .
innerHeight() metoda returneaza inaltimea unui element (includes padding ) .
Exemplul următor returnează interior lățimea / înălțimea unui specificat <div> Element:
Exemplu
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
}); Încearcă - l singur » jQuery outerWidth() și outerHeight() Metode
outerWidth() Metoda returnează lățimea unui element (include padding și de border ).
outerHeight() metoda returneaza inaltimea unui element (include padding și de border ).
Exemplul următor returnează exterior lățimea / înălțimea unui specificat <div> Element:
Exemplu
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
}); Încearcă - l singur » outerWidth(true) metoda returneaza lățimea unui element (include padding, border și margin ).
outerHeight(true) metoda returneaza inaltimea unui element (include padding, border și margin ).
Exemplu
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
}); Încearcă - l singur » jQuery Mai width() și height()
Următorul exemplu returnează lățimea și înălțimea documentului (documentul HTML) și fereastra (the browser viewport) - (the browser viewport) :
Exemplu
$("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);
}); Încearcă - l singur » Exemplul următor stabilește lățimea și înălțimea unui specificat <div> Element:
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »
jQuery CSS referință
Pentru o prezentare completă a tuturor metodelor jQuery CSS, vă rugăm să accesați pagina jQuery HTML / CSS de referință .