Les dimensions

Dans cette partie, nous verrons les méthodes de calcul de dimensions .width(), .innerWidth(), .outerWidth(), .height(), .innerHeight(), .outerHeight().

Voici le modèle de boite suivant lequel se base les méthodes.

Voyons maintenant à quoi peuvent maintenant nous servir ces méthodes.

Exemple 1

Nous pouvons donner la hauteur de la fenêtre aux éléments <section>, redimensionnable au resize du navigateur (astuce pour le responsive).

// Création de la fonction
function halfHeight() {
    // Attribuons à 'hWindow' la hauteur du navigateur
    var hWindow = $(window).height();
    // Ajoutons la hauteur de 'hWindow' aux éléments section
    $('section').css('height', hWindow);
}

$(function() {
    // Lancer la fonction quand le DOM est ready
    halfHeight();
});

$(window).resize(function() {
    // Lancer la fonction au redimensionnement de la fenêtre
    halfHeight();
});

See the Pen .height() by Sutterlity (@sutterlity) on CodePen.

Exemple 2

Nous pouvons aussi calculer la hauteur d'un élément pour l'assigner à un autre.

// Création de la fonction
function sameHeight(elem) {
    // initialisation de la hauteur de base à 0
    var tallest = 0;
    // Parcours de tous les éléments
    elem.each(function() {
        // Mise en variable de la hauteur de l'élément
        var thisHeight = $(this).height();
        // Condition pour savoir si la hauteur de l'élément est plus grande que 'tallest'
        if(thisHeight > tallest) {
            // Si l'élément est plus grand, nous assignons la nouvelle valeur à 'tallest'
            tallest = thisHeight;
        }
    });
    // Nous appliquons le style CSS sur l'élément
    elem.height(tallest);
}

$(function(){
    // Lancer la fonction quand le DOM est ready
    sameHeight( $('.box-list-item') );
});

See the Pen .height()-2 by Sutterlity (@sutterlity) on CodePen.