jQuery: i metodi per calcolare le dimensioni degli elementi

jQuery dispone di sei metodi distinti per calcolare la dimensione degli elementi utilizzando le regole del box model CSS. Vediamoli in dettaglio.

width() e height()

Questi due metodi restituiscono la larghezza e l'altezza di un elemento considerando solo l'area di contenuto, ossia senza padding e bordi:

$( "#width" ).on( "click", function() {
    $( "#output" ).text($( "#test" ).width());
});
    
$( "#height" ).on( "click", function() {
    $( "#output" ).text($( "#test" ).height());
});

innerWidth() ed innerHeight()

Questi due metodi restituiscono la larghezza e l'altezza di un elemento considerando anche il padding ma non i bordi:

$( "#innerwidth" ).on( "click", function() {
    $( "#output" ).text($( "#test" ).innerWidth());
});

$( "#innerheight" ).on( "click", function() {
    $( "#output" ).text($( "#test" ).innerHeight());
});

outerWidth() ed outerHeight()

Questi due metodi restituiscono la larghezza e l'altezza di un elemento considerando anche il padding ed i bordi:

$( "#outerwidth" ).on( "click", function() {
    $( "#output" ).text($( "#test" ).outerWidth());
});

$( "#outerheight" ).on( "click", function() {
    $( "#output" ).text($( "#test" ).outerHeight());
});