Modifier une propriété CSS avec jQuery
La fonction jQuery .css() sert à la fois à lire et à écrire la valeur d'une propriété CSS sur un élément. Lorsqu'on lui passe un seul paramètre comme dans le code d'exemple suivant, on obtient la valeur de la propriété :
$('body').css('background-color');
// Résultat: rgba(0, 0, 0, 0)
Par contre quand on ajoute un second paramètre, jQuery va attribuer la valeur du second argument à la propriété CSS spécifiée en premier argument :
$('body').css('background-color', 'red');
// Résultat: l'arrière-plan de la page devient rouge, rgb(255, 0, 0)En passant un objet à la fonction CSS, on peut définir plusieurs règles CSS, avec le nom de la propriété en clé, et la valeur de la propriété en valeur :
Allez donc jeter un oeil sur cette page : changer la couleur d'une cellule si la valeur est différente.
$('body').css({
'margin': '10px',
'font': '14pt Arial',
'background-color': 'SkyBlue'
});
La fonction CSS définit les propriétés directement dans l'attribut style inline sur les éléments cibles du sélecteur. Malheureusement il n'est pas possible de définir de règle CSS globale (avec un sélecteur) avec jQuery, sauf en ajoutant un élément <style> à l'élément <head> de la page.
Allez donc jeter un oeil sur cette page : effet de loupe dans photoshop.
