Médiaforma

jQuery – Taille et position des éléments

Print Friendly

Vous utiliserez les méthodes offset().left et offset().top pour connaître/modifier la position d’un élément sur l’écran et les méthodes width() et height() pour connaître/modifier la largeur et la hauteur d’un élément par rapport au coin supérieur gauche de l’écran.

Exercice 1

Entrez le code suivant dans NotePad++ et sauvegardez-le sous le nom taille-et-position.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille et position des éléments sur la page</title>
    <style>
      #boite {
        position: absolute;
        top: 40px;
        left: 50px;
        width:300px;
        height: 200px;
        background-color: yellow;
        border: solid;
        border-width: 2px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <div id="boite"></div>
    <p id="status"></p>
    <script>
      $(function() {
        //Insérer le code jQuery ici
      });
    </script>
  </body>
</html>

Ajoutez les instructions jQuery nécessaires pour afficher les dimensions et la position de l’élément #boite dans l’élément #status.

 

Solution

var x = $('#boite').offset().left;
var y = $('#boite').offset().top;
var l = $('#boite').width();
var h = $('#boite').height();
$('#status').text('Dimensions : '+l+'x'+h+' px. Position : à '+y+'px du haut et à '+x+' px de la gauche.');

 

Exercice 2

Ajouter deux éléments button au DOM et définir le code jQuery pour que :

  1. Le premier bouton positionne l’élément #boite à 200 pixels du bord gauche et 120 pixels du bord supérieur
  2. Le deuxième bouton redimensionne l’élément #boite à 150×30 pixels

 

Solution

$('#position').on('click',function(){
  $('#boite').offset({top:120,left:200});
});
$('#taille').on('click',function(){
  $('#boite').width('150px').height('30px');
});
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply