Méthode css
La méthode css permet d'obtenir
et de modifier les styles CSS d'un élément.
Il est important de se rappeler que nous obtiendrons les 'valeurs
calculées' des propriétés (computed style
properties), qui peuvent différer de
celles spécifiées dans les styles CSS.
Syntaxe
Obtenir une propriété :
$(sélecteur).css(propriété);
Obtenir plusieurs propriétés, le paramètre transmis est un tableau de noms de propriétés :
$(sélecteur).css(['width', 'height', 'color']);
Modifier une propriété :
$(sélecteur).css(propriété, nouvelle valeur);
Modifions plusieurs propriétés en les transmettant sous forme d'objet,
contenant des paires 'clé: valeur'. Le nom de la propriété
est indiqué sous la forme CamelCase :
$(sélecteur).css({fontSize: '12px', color: 'red'});
Ou, une alternative :
<p class="www">text</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Nous pouvons également appliquer une fonction donnée à chaque
élément de l'ensemble. Dans ce cas, le premier paramètre de la fonction
recevra l'index de l'élément dans l'ensemble, et le second paramètre
- la valeur actuelle de la propriété CSS spécifiée
pour l'élément concret. De plus, this
à l'intérieur de la fonction pointera vers l'élément courant.
La propriété CSS de chaque élément sera remplacée par la valeur
que la fonction renvoie spécifiquement pour cet élément :
$(sélecteur).css(nom de la propriété, function(index dans l'ensemble, valeur actuelle de la propriété css));
Exemple
Prenons tous les éléments avec la classe www
et changeons leur couleur en rouge :
<p class="www">text</p>
$('.www').css('color', 'red');
Exemple
Prenons tous les éléments avec la classe www
et changeons leur couleur en rouge, et la taille de police
- à 20px :
<p class="www">text</p>
$('.www').css({color:'red', fontSize:'20px'});
Ou, une alternative :
<p class="www">text</p>
$('.www').css({'color':'red', 'font-size':'20px'});
