Le dimensionnement d’un élément en jQuery

Le dimensionnement d’un élément en jQuery

  1. Objectifs

    • Etre capable d’utiliser la méthode css() en jQuery
  2. Présentation

    • 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.
    • Le dimensionnement d’un élément en jQuery




  3. Les méthodes de dimensionnement

      • Avec jQuery, une série de méthodes sont relatives à la dimension des éléments. On a:
    1. La méthode width()
      • La méthode width() qui renvoie la largeur d’un élément, exprimée en pixels; cette méthode renvoie une chaîne de caractères.
      • Elle retourne la largeur d’un élément. Les padding, border et les margin ne sont pas compris dans le calcul.
    2. La méthode height()
      • La méthode height() qui renvoie la hauteur d’un élément, exprimée en pixels; cette méthode renvoie une chaîne de caractères.
    3. La méthode width(une_valeur)
      • La méthode width(une_valeur) qui assigne une largeur une_valeur aux éléments spécifiés; si aucune unité n’est spécifiée (comme em ou %), l’unité pixel (px) sera choisie par défaut.
    4. La méthode height(une_valeur)
      • La méthode height(une_valeur) qui assigne une hauteur une_valeur aux éléments spécifiés; si aucune unité n’est spécifiée (comme em ou %), l’unité pixel (px) sera choisie par défaut.
    5. La méthode innerWidth()
      • La méthode css en jQuery

        La méthode innerWidth() qui renvoie la largeur intérieure (la bordure est exclue mais le padding est inclus) du premier élément trouvé répondant à la sélection (largeur intérieure exprimée en pixels).

      • Exemple:Obtenir la largeur intérieure d’un paragraphe.
      • La méthode css en jQuery

    6. La méthode innerHeight()
      • La méthode css en jQuery

        La méthode innerHeight() qui renvoie la hauteur intérieure (la bordure est exclue mais le padding est inclus) du premier élément trouvé répondant à la sélection (hauteur intérieure exprimée en pixels).

      • Elle définit ou retourne la hauteur d’un élément. Les padding sont compris dans le calcul mais pas les border et les margin.
      • Exemple:Obtenir la hauteur intérieure d’un paragraphe.
      • La méthode css en jQuery

    7. La méthode outerWidth()
      • La méthode outerWidth() qui renvoie la largeur extérieure (incluant la bordure et le padding par défaut) du premier élément trouvé répondant à la sélection (largeur extérieure exprimée en pixels).
    8. La méthode outerHeight()
      • La méthode outerHeight() qui renvoie la hauteur extérieure (incluant la bordure et le padding par défaut) du premier élément trouvé répondant à la sélection (hauteur extérieure exprimée en pixels).
  4. La méthode resize()

    • La méthode resize() sert à écouter l’événement de redimensionnement du navigateur.
    • Prenons un exemple plus intrusif qui nous servira juste à voir le fonctionnement de cette méthode.
    • Comme la méthode .resize() n’est qu’un raccourci .on( "resize", handler ), le détachement est possible en utilisant .off( "resize" ).
    • $(window).resize(function() {
      alert('Je redimensionne mon navigateur');
      });
    • Cette méthode sera bien utile pour adapter certains de vos scripts au responsive webdesign.
  5. Application

    1. Énoncé
      • Dans une page HTML "appDimentionnement.html",créer un élément "div" qui contient à son tour trois éléments "li"(dans un ul) alignés
      • Colorer les éléments "li" avec des couleurs différentes
      • Remplir les trois div avec les textes suivants:
        • contenu li_01:Je suis un élément qui appelle la classe: box-list-item
        • contenu li_02:Je suis un élément qui appelle la classe : box-list-item avec float: left;width: 33.333%;padding: 10px;
        • contenu li_03:Je suis un élément qui appelle la classe : box-list-item avec float: left;width: 33.333%;padding: 10px; et d’autres propriétés .box-list-item { color: #fff },.box-list-item:nth-child(1){ background: #000 },.box-list-item:nth-child(2){ background: #09f } et
          .box-list-item:nth-child(3) { background: #f09 }
      • Créer une fonction jQuery qui permet d’uniformiser la hauteur des éléments li
    2. Solution
      • <style>
           .box {
          padding: 10px;
          overflow: hidden;
        }
        .box-list {
          padding-left: 0;
          list-style: none;
        }
        .box-list-item {
          float: left;
          width: 33.333%;
          padding: 10px;
        }
        .box-list-item { color: #fff }
        .box-list-item:nth-child(1) { background: rgb(240, 235, 235) }
        .box-list-item:nth-child(2) { background: #09f }
        .box-list-item:nth-child(3) { background: #f09 }
        </style>
          </head>
          <body>
            <div class="box">
              <ul class="box-list">
                <li class="box-list-item">Je suis un élément qui appelle la classe: box-list-item.</li>
                <li class="box-list-item">Je suis un élément qui appelle la classe : box-list-item avec float: left;width: 33.333%;padding: 10px;</li>
                <li class="box-list-item">Je suis un élément qui appelle la classe : box-list-item avec float: left;width: 33.333%;padding: 10px; et d’autres propriétés .box-list-item { color: #fff },.box-list-item:nth-child(1){ background: #000 },.box-list-item:nth-child(2){ background: #09f } et
                  .box-list-item:nth-child(3) { background: #f09 }</li>
              </ul>
            </div>
        
        
          <script>
        // Création de la fonction
        function sameHeight(elem) {
        // initialisation de la hauteur de base à 0
        var hauteurest = 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 > hauteurest) {
        // Si l'élément est plus grand, nous assignons la nouvelle valeur à 'tallest'
        hauteurest = thisHeight;
        }
        });
        // Nous appliquons le style CSS sur l'élément
        elem.height(hauteurest);
        }
        $(function(){
        // Lancer la fonction quand le DOM est ready
        sameHeight( $('.box-list-item') );
        });
          </script>

Abonnez vous à notre chaîne YouTube gratuitement