• 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Décorer la page

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

L'accessibilité et la modification du style des éléments de votre page, ainsi que leurs classes, leurs dimensions, leurs ascenseurs et enfin leurs différentes positions seront étudiés dans ce très court chapitre.

N'oubliez pas que dans les méthodes que l'on va apprendre, vous pourrez passer des fonctions en argument (en setter) !

Style

css() peut s'utiliser de plusieurs façons différentes, les mêmes que attr(). Pour résumer :

  • css('attribut') permet de récupérer la valeur d'un attribut CSS

  • css('attribut',valeur) permet de définir un attribut CSS

  • css({attribut1: valeur1, attribut2: valeur2}) permet de définir plusieurs attributs CSS

  • valeur dans les deux lignes précédentes peut être une fonction qui retourne la valeur de l'attribut CSS.

N'oubliez pas que dans le troisième cas, l'attribut border-left-style par exemple, s'écrira borderLeftStyle ou 'border-left-style'.

A retenir :

  1. float est un mot clé du langage JavaScript, il est donc préférable de l'entourer de guillemets.

  2. L'attribut opacity, un nombre (ou chaîne de caractères) compris entre 0 et 1, peut être utilisé et marche sous Internet Explorer.

// Couleur de fond cyan.
$('body').css('background-color','#0ff');

// Formatage des liens.
$('a')
  .css({
    borderBottom: '2px dashed #88d',
    color: '#44b',
    paddingLeft: '4px',
    'float': 'left',
    margin: '4px',
    'letter-spacing': '2px',
    textDecoration: function(){
      return $(this).attr('decoration');
    },
    opacity: 0.8
  })
  .attr('title',function(){
    return 'couleur : '+$(this).css('color')
  });

Classes

Enlever et ajouter des classes

Au même titre que removeAttr(), removeClass() vous permettra d'enlever une ou plusieurs classes et addClass() vous permettra d'ajouter une ou plusieurs classes.

$('span:first').addClass('premier');
$('a[href*="moi.free.fr"]')
  .addClass('lienInterne')
  .removeClass('lienExterne');

Interchanger des classes

toggleClass() vous permettra de jongler entre la présence et l'absence d'une ou de plusieurs classes.

function interchangerClasseSurligner(){
  $('a').toggleClass('surligner');
}

function interchangerClasseRouge(){
  $('a').toggleClass('rouge');
}

Son deuxième paramètre, facultatif, est un booléen, qui à false fait l'effet d'un removeClass(), et qui à true fait l'effet d'un addClass().

Vérifier la possession d'une classe

hasClass() est une méthode qui permet de déterminer si un élément a une classe (renvoie true) ou non (renvoie false).

// Si le premier paragraphe a la classe 'important' :
//   changer son attribut title en 'Ce paragraphe est important.' ;
//   sinon changer son attribut title en "Ce paragraphe n'est pas important.".
$('p:first').hasClass('important')
  ? $('p:first').attr('title','Ce paragraphe est important.')
  : $('p:first').attr('title',"Ce paragraphe n'est pas important.");

// Renvoie forcément faux.
$('*:not(.salut)').hasClass('salut');

Dimensions

Récupérer les dimensions

Un élément a une seule largeur et hauteur, mais il y a plusieurs façons de les définir : on compte les bordures, les marges, le padding (marges intérieures) ou pas ? C'est ce qu'on appelle le « box model ».
Ainsi, on différencie quatre couples de méthodes (le dernier est dérivé du troisième), dans l'ordre croissant du nombre donné :

Hauteur

Largeur

Padding ?

Bordures ?

Marges ?

height()
(hauteur)

width()
(largeur)

non

non

non

innerHeight()
(hauteur intérieure)

innerWidth()
(largeur intérieure)

oui

non

non

outerHeight()
(hauteur extérieure)

outerWidth()
(largeur extérieure)

oui

oui

non

outerHeight(true)
(idem)

outerWidth(true)
(idem)

oui

oui

oui

#rectangle
{
  position: relative;
  outline: 7px dotted #fdd;
  border: 4px dashed #ddf;
  margin: 5px;
  padding: 3px;
  background-color: #dfd;
}

#rectangle div
{
  margin: 24px 2px 0 5px;
  padding-left: 83px;
  background-color: #999;
}

#commentaires
{
  font-family: monospace;
}

Définir les dimensions

Seul le premier couple de méthodes vous permettra de définir ces dimensions (en passant en argument un nombre représentant cette hauteur ou largeur).

// Pour que le logo prenne presque toute la page.
// (Math.round(x) retourne l'entier le plus proche de x.)
$('img#logo').width(Math.round($('body').width()*0.9));

Ascenseurs

scrollTop() renvoi le nombre en pixels de défilement de l'ascenseur vertical.
scrollLeft() renvoi le nombre en pixels de défilement de l'ascenseur horizontal.

Ces méthodes permettent aussi de définir ce défilement quand on leur passe un entier positif en argument représentant le décalage désiré.

function afficherDefilements(){
  alert( [ $('#contenu div').scrollTop() , $('#contenu div').scrollLeft() ] );
}

function definirAscenseurs(){
  $('#contenu div').scrollTop(Math.random()*$('#contenu div p').height());
  $('#contenu div').scrollLeft(Math.random()*$('#contenu div p').width());
}

Positions

Absolue

offset() est une méthode qui permet de récupérer la position X et Y d'un élément par rapport à la page (ces valeurs sont donc absolues). Elle renvoie un objet contenant left et top :

  • offset().left renvoie la position horizontale (X) d'un élément par rapport à la page ;

  • offset().top renvoie la position verticale (Y) d'un élément par rapport à la page.

Relative

position() est une méthode qui permet de récupérer la position X et Y d'un élément par rapport à son parent (ces valeurs sont donc relatives). Elle renvoie un objet contenant left et top :

  • position().left renvoie la position horizontale d'un élément par rapport à son parent ;

  • position().top renvoie la position verticale d'un élément par rapport à son parent.

Définir la position absolue

Depuis la version 1.4 de jQuery, on peut définir la position absolue d'un élément, grâce à la méthode offset().
Il suffit de lui passer en paramètre soit un objet contenant les propriétés left et / ou top, soit une fonction qui va renvoyer cet objet.

Le premier argument de la fonction de retour est l'index de l'élément en question, et le second est, comme vous vous l'attendiez, la position absolue de cet élément (objet contenant les propriétés top et left, soit le résultat de la méthode offset() sur cet élément).

$('#boite').offset({
    left : 28
  , top  : 45
});


var hauteur = $('div.liste:first').outerHeight(true) + 2;

$('div.liste').offset(function( i , o ){
  return {
      top  : i * hauteur
    , left : o.left
  };
});

Si l'élément en question a sa propriété CSS position à static, elle sera alors redéfinie en relative, pour pouvoir changer sa position par rapport au document.

La décoration de votre page n'a plus de secret pour vous, mais il ne faut pas trop en abuser au risque de faire perdre de l'accessibilité à votre site.
En effet, les utilisateurs ayant désactivé JavaScript ne verront les modifications apportées par jQuery.

Appris dans ce chapitre : méthodes : css(), addClass(), removeClass(), toggleClass(), hasClass(), height(), innerHeight(), outerHeight(), width(), innerWidth(), outerWidth(), scrollTop(), scrollLeft(), offset(), position().

Exemple de certificat de réussite
Exemple de certificat de réussite