NuxBSD: Free Infos

Retour d'un niveau
Retour à l'accueil

La méthode css() peut prendre plusieurs sortes d'arguments. Le plus simple est de spécifier le nom de la propriété, afin de récupérer sa valeur. Imaginez que vous ayez un paragraphe dont le texte est de couleur verte.
Pour récupérer cette donnée, vous devrez faire ceci en jQuery :

$('p').css('color'); 
// ma méthode ira chercher la valeur de la propriété "color" de 'p' et retournera "green"

s'il est possible de récupérer la valeur d'une propriété CSS spécifique, il est aussi possible d'en définir et d'en modifier.
Pour cela, il suffit de passer un deuxième argument à la méthode, qui contiendra la valeur à donner à l'attribut :

$('p').css('color', 'red'); 
// ma méthode modifiera la propriété "color" et la définira à "red"

Il est également possible de définir plusieurs propriétés CSS en même temps, grâce à un objet JavaScript que l'on passera en tant qu'argument.
Il suffira de séparer les différents attributs par une virgule :

$('p').css({
    color :  'red',   // couleur rouge
    width :  '300px', // largeur de 300px
    height : '200px'  // hauteur de 200px
});

Une chose est à retenir pour cette troisième façon de faire : il ne faut pas oublier que les tirets ne sont pas acceptés dans les identifiants d'un objet ! Pour parer à ce problème, il vous faut soit mettre la première lettre de chaque mot en majuscule, sans séparer ceux-ci, soit mettre le nom de la propriété entre guillemets ou apostrophes :

$('p').css({
    borderColor :   'red',   // bordure rouge
    paddingRight :  '30px',  // marge intérieure de 30px
    'margin-left' : '10px'   // marge extérieure de 10px (propriété pas prise en compte à cause du tirait)
});

La position des éléments d'une page web peut se définir avec la méthode css(), en modifiant les propriétés left, top, right et bottom.
Parallèlement, des méthodes en jQuery permettent de faire ceci de manière plus propre :

• offset(), qui définit la position d'un élément par rapport au document, c'est donc une position absolue ;
• position(), qui définit la position d'un élément par rapport à son parent, c'est donc une position relative.

Rappel position :

• static : le positionnement par défaut de tous les élément est : position: static
• relative : si vous spécifier position: relative, alors vous pouvez utilisez top ou bottom, et left ou right pour déplacer les éléments relativement à l'endroit ou ils devraient normalement se trouver dans le document
• absolute : si on spécifie position: absolute, l'élément est retiré du document et placer a l'endroit exact ou vous le demandez

Positionement

Il est possible de spécifier une nouvelle position à un élément, en passant par les méthodes précédentes.
Il suffit de passer un objet en tant qu'argument, en donnant les nouvelles valeurs (en pixels) aux identifiants left et top :

$('p').offset({
    left : 30,
    top : 200
});
 
$('p').position({
    left : 200
});

De même que pour les positions d'un élément, les dimensions peuvent être gérées directement avec css(). Cependant, plusieurs autres méthodes sont très pratiques pour gérer la hauteur et la largeur d'un bloc.
Il s'agit des fonctions suivantes :

• height(), qui retourne la hauteur formatée en pixels ;
• width(), qui fait la même chose avec la largeur ;
• innerHeight() et innerWidth(), qui prennent en compte les marges intérieures ;
• outerHeight() et outerWidth(), qui prennent en compte les marges intérieures et la bordure d'un élément.

Rappel Modèle des boîtes : Le box model est un concept à connaître lorsque l'on manipule les dimensions avec jQuery. Conrètement, il faut retenir qu'il y a plusieurs types de largeur et d'hauteur. Les marges intérieures, les bordures et les marges extérieures sont des éléments à prendre en compte, et c'est pourquoi jQuery a créé plusieurs méthodes pour répondre à ce système.

Pour les marges extérieures il faut passer la valeur true aux méthodes outerHeight() et outerWidth().

$('p').height(); // retourne la hauteur stricte du paragraphe
$('p').innerWidth(); // retourne la largeur (avec marges intérieures) du paragraphe
$('p').outerWidth(); // retourne la largeur (avec marges intérieures + bordures) du paragraphe
$('p').outerHeight(true); // retourne la hauteur (avec marges intérieures + bordures + marges extérieures) du paragraphe

Retour d'un niveau
Retour à l'accueil