Manipuler CSS avec Javascript ou JQuery.

Pourquoi changer les styles CSS avec Javascript ou JQuery ?

Il est souvent nécessaire de modifier la mise en forme d'une page HTML après son chargement, ce qui nécessite de modifier les styles CSS de la page avec un langage exécutable sur le poste de l'internaute (côté client).

• Affichage ou masquage de certaines zones de saisie en fonction de précédentes saisies effectuées par l'utilisateur. Exemple : cacher la zone de saisie "Nom de jeune fille" lorsque une première saisie indique qu'il s'agit d'un homme.
• Application de propriétés CSS dont les valeurs sont calculées, ce qui permet de compenser la faiblesse de CSS en matière de calculs.

Par contre, Javascript est aujourd'hui inutile pour :

• La prise en compte des possibilités du périphérique : reportez-vous à la directive @media qui permet de gérer les spécificités du terminal en pur CSS.
• De même les réactions aux actions de l'utilisateur, comme le déplacement du pointeur de souris, peuvent se définir très facilement avec les pseudo-classes, la plus couramment utilisée étant :hover.
• Les animations sont entièrement prises en charges par CSS (voir la directive @keyframes) et ne nécessitent aucun code supplémentaire . Cependant nous présentons plus loin un code Javascript pour paramétrer ou définir une animation.

Éléments de syntaxe.

Les valeurs, même s'il s'agit de nombres, sont toujours considérées par Javascript comme du texte. Premièrement parce qu'il est souvent nécessaire de préciser l'unité. Mais même si l'unité n'a pas à être précisée (valeur 0 ou valeur sans unité), il est conseillé de spécifier la valeur entre apostrophes ou guillemets dans le code Javascript.

el.style.margin='0';

Dans quelques rares cas, la valeur CSS doit être entourée de guillemets ou d'apostrophes, comme par exemple le nom d'une police de caractères comportant des espaces. Il faut veiller à ne pas créer de confusion entre le délimiteur de Javascript et celui de CSS. Mais, comme ces deux langages acceptent indifféremment les apostrophes ou les guillemets, la solution est simple :

el.style.fontFamily='"Times New Roman", serif';

Javascript et JQuery acceptent les noms des propriétés écrits en kebab-case, aussi bien qu'en camel-case. Cela fait une différence uniquement pour les noms de propriété composés de plusieurs mots, ce qui est malgré tout assez courant : font-family, border-top-right-radius, etc.

Exemples de codes Javascript.

Modifier la valeur d'une propriété pour UN élément.

Le résultat sera équivalent à l'ajout d'un attribut style à l'élément identifié par son id.

div id="id" style="font-size:12px".../div

const el = document.getElementById('id'); el.style['font-size']='12px';

Une deuxième syntaxe est possible, en considérant style non pas comme un tableau, mais comme un objet.

const el = document.getElementById('id'); el.style.fontSize='12px';

Lorsque plusieurs valeurs de propriété doivent être modifiées, il sera plus simple d'utiliser la syntaxe suivante. Tel qu'il est écrit, le code efface tous les styles précédemment définis sur l'élément ; pour les conserver, il suffit de remplacer le signe = par l'opérateur +=.

const el = document.getElementById('id'); el.style.cssText='font-size:12px; font-weight:bold; color:red;';

Lire la valeur d'une propriété pour UN élément.

Le code ci-dessous retrouve la valeur d'une propriété affectée à un élément via son attribut style. C'est donc le symétrique du code précédent qui affectait une valeur à une propriété via l'attribut style d'un élément. Les valeurs de propriété définies via un sélecteur CSS ne sont pas retrouvées par ce code. Pour cela reportez-vous à l'exemple sur les valeurs calculées.

const el = document.getElementById('id'); alert(el.style['font-size']);

Lire la valeur calculée d'une propriété pour UN élément.

La valeur calculée d'une propriété peut avoir plusieurs origines :

• Une valeur affectée via l'attribut style d'un élément.
• Une valeur affectée via un sélecteur CSS, après résolution des conflits suivant les les règles de priorité de CSS.
• Une valeur héritée.
• A défaut, la valeur calculée sera la valeur initiale de la propriété.

Pour chaque propriété, la valeur calculée est toujours exprimée sous la même forme, même si plusieurs syntaxes existent pour la définir. Par exemple les unités relatives sont en général converties en unités absolues après un calcul tenant compte du contexte ; les unités de dimensions sont converties en pixels, même si elles ont été définies dans une autre unité ; il existe de nombreuses syntaxes pour définir une couleur (code hexadécimal, nom de la couleur, fonction hsl(), etc.) mais la valeur calculée est toujours exprimée avec la fonction rgb() ou rgba() si l'indication d'un pourcentage de transparence est nécessaire.

La valeur calculée ne peut pas être définie directement puisqu'elle résulte d'un calcul faisant intervenir la cascade des héritages et les règles de priorité, mais il est toujours possible de lire cette valeur calculée. L'exemple de code ci-dessous affiche la valeur calculée de la propriété font-size pour un élément désigné par son id:

const el = document.getElementById('id'); alert(window.getComputedStyle(el).getPropertyValue('font-size'));

Ajouter une classe à un élément.

Si des styles sont déjà associés à la classe ajoutée, ils seront immédiatement pris en compte. Cette solution présente au moins deux avantages :

• Appliquer à un élément toute une série de règles CSS, en une seule écriture.
• Gardez tous les codes CSS groupés dans la feuille de styles.

const el = document.getElementById('id'); el.classList.add("nom-classe");

Retirer une classe à un élément.

C'est le code symétrique du précédent. Les styles associés à la classe que l'on retire sont immédiatement désactivés pour cet élément.

const el = document.getElementById('id'); el.classList.remove("nom-classe");

Définir de nouvelles règles CSS valables pour la page.

Cette syntaxe permet de définir des styles applicables à plusieurs éléments de la page, via des sélecteurs CSS. Par rapport aux codes précédents, cette solution est certes un peu plus complexe, mais présente de nombreux avantages :

• Il est possible de définir des styles pour les pseudo-classes ou pseudo-éléments. Dans notre exemple :hover.
• Possibilité de définir des animations avec la directive @keyframes. Il ne s'agit pas de faire réaliser l'animation par Javascript, mais de la définir ou la paramétrer.
• Possibilité de télécharger des polices de caractères avec la directive @font-face.

Attention à la subtilité de syntaxe en Javascript : le code CSS étant généralement écrit sur plusieurs lignes, il faut utiliser le délimiteur ` (apostrophe incliné) accessible sous Windows avec les touches ALTGR 7.

const style = document.createElement('style'); style.innerHTML = ` .classe {color:red; font-size:12px;} #id {color:green; font-weight:bold;} a:hover {background-color:yellow;} `; document.head.appendChild(style);

La variable style pourra être conservée (déclarée en global). Elle pourra être utile si, par la suite, les styles doivent être supprimés.

document.head.removeChild(style);

Ajouter une feuille de styles à la page.

Cet exemple de code associe une nouvelle feuille de styles à la page. La mise en forme de cette dernière est immédiatement redéfinie en fonction des nouveaux styles.

const link = document.createElement('link'); link.href = '.../fichier.css'; link.type = 'text/css'; link.rel = 'stylesheet'; document.head.appendChild(link);

Exemples de codes JQuery.

Les codes JQuery sont généralement plus courts que ceux en Javascript, mais bien entendu la librairie JQuery devra être référencée dans la section head de la page (v.v.v correspond à la version de JQuery à utiliser) :

script src=".../jquery-v.v.v.min.js"/script

Remarque : JQuery, tout comme Javascript, accepte les noms de propriété écrits en kebab-case ou en camel-case.

Modifier la valeur d'une propriété pour UN élément.

$('#id').css('font-size','12pt'); // ou $('#id').css('fontSize','12pt');

Lire la valeur calculée d'une propriété.

alert($('#id').css('font-size'));

Ajouter des règles CSS à une page.

Cette syntaxe est celle qui offre le plus de possibilités : application de règles CSS aux pseudo-éléments ou pseudo-classes, définition de directives, paramétrage d'une animation avec @keyframes, etc.

Pour que la syntaxe soit plus lisible, les règles CSS ont été écrites sur plusieurs lignes. la syntaxe accepte cela à condition d'utiliser le délimiteur ` (apostrophe incliné).

$('head').append(` style #id {color:red;} a:hover {background:red;} /style `);

Ajouter une feuille de styles à la page.

Cet exemple de code fonctionne sur le même principe que le précédent, mais au lieu d'ajouter une balise style, on ajoute une balise link à la section head de la page.

$('head').append('link href=".../fichier.css" rel="stylesheet" /');