Calcolare le dimensioni degli elementi in jQuery

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').click(function() {
    $('#output').text($('#test').width());
});
    
$('#height').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').click(function() {
    $('#output').text($('#test').innerWidth());
});

$('#innerheight').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').click(function() {
    $('#output').text($('#test').outerWidth());
});

$('#outerheight').click(function() {
    $('#output').text($('#test').outerHeight());
});