Con jQuery, è facile lavorare con le dimensioni degli elementi e finestra del browser.
jQuery Metodi Dimension
jQuery ha diversi metodi importanti per lavorare con le dimensioni:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Dimensioni
jQuery width() e height() Metodi
Le width() set di metodo o restituisce la larghezza di un elemento (esclude padding, border e margin ).
Le height() set di metodo o restituisce l'altezza di un elemento (esclude padding, border e margin ).
L'esempio seguente restituisce la larghezza e l'altezza di una specifica <div> elemento:
Esempio
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
}); Prova tu stesso " jQuery innerWidth() e innerHeight() Metodi
Il innerWidth() restituisce la larghezza di un elemento (include padding ).
Il innerHeight() restituisce l'altezza di un elemento (include padding ).
L'esempio seguente restituisce la interno-larghezza / altezza di una specifica <div> elemento:
Esempio
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
}); Prova tu stesso " jQuery outerWidth() e outerHeight() Metodi
Il outerWidth() restituisce la larghezza di un elemento (include padding e border ).
Il outerHeight() restituisce l'altezza di un elemento (include padding e border ).
L'esempio seguente restituisce la esterno-larghezza / altezza di una specifica <div> elemento:
Esempio
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
}); Prova tu stesso " Il outerWidth(true) restituisce la larghezza di un elemento (include padding, border e margin ).
Il outerHeight(true) restituisce l'altezza di un elemento (include padding, border e margin ).
Esempio
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
}); Prova tu stesso " jQuery più width() e height()
L'esempio seguente restituisce la larghezza e l'altezza del documento (il documento HTML) e la finestra (la finestra del browser):
Esempio
$("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);
}); Prova tu stesso " L'esempio seguente imposta la larghezza e l'altezza di una specifica <div> elemento:
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
jQuery CSS di riferimento
Per una panoramica completa di tutti i metodi di jQuery CSS, si prega di visitare il nostro / CSS di riferimento jQuery HTML .