Editions ENI Livres | Vidéos | e-Formations
Manipulation des propriétés CSS
Introduction
En utilisant CSS (Cascading Style Sheets), vous pouvez appliquer des styles à vos pages web et ainsi mettre en forme vos données. Avec CSS et son intégration dans le DOM (Document Object Model), vous pouvez rapidement et facilement relooker n’importe quel élément.
Par exemple, vous pouvez modifier l’aspect par défaut des balises d’en-tête <h1>, <h2>, etc., vous pouvez affecter de nouveaux styles aux attributs que vous manipulez dans votre page et ainsi de suite. Tout élément d’une page peut être atteint et modifié.
Avec une bonne compréhension du DOM et CSS, vous apprendrez dans ce chapitre comment accéder à la fois au DOM et au CSS directement à partir de JavaScript, ce qui vous permettra de créer des sites web dynamiques et réactifs.
La fonction getElementById()
getElementById est une des principales fonctions pour manipuler un élément du DOM, elle permet tout simplement d’accéder à l’élément de votre page qui est identifié par son attribut id, à condition de l’avoir mentionné, car il n’est pas obligatoire :
<div id="mondiv">Exemple de texte</div>
Ainsi, getElementById vous permet d’accéder à cet élément via son id (mondiv). Cet élément est en fait un objet sur lequel on peut agir pour changer le contenu du texte, ses propriétés de style (couleur, font…) comme ceci :
<script>
document.getElementById('mondiv').style.color = 'blue';
</script>
Ce qui affiche :
Gardez bien en tête qu’un élément du DOM identifié par un iddoit être unique. Dans le cas contraire, vous risquez d’obtenir des comportements inattendus.
La fonction getElementByClassName()
Contrairement aux identifiants uniques repérés par l’attribut id, il est parfois nécessaire d’accéder à plusieurs éléments à la fois dans la page HTML. Pour cela, on utilise l’attribut class.
La différence avec un id réside dans le fait qu’on peut l’utiliser plusieurs fois la page. Dans ce cas, tous les éléments du DOM ayant la même class seront traités à la fois.
La fonction getElementByClassName vous permet d’identifier chaque élément du DOM qui a la classe passée en paramètre.
Contrairement à la fonction getElementById(), getElementByClassName() peut retourner plusieurs éléments, donc on obtient en retour de fonction un tableau.
On peut alors utiliser cette fonction comme ceci :
tableau_maclass = document.getElementsByClassName('maclass')
Voyez l’exemple suivant :
<body>
<div id="mondiv">Exemple de texte</div>
<br>
<div class='maclass'>Un div avec maclass</div>
<p class='maclass'>Un paragraphe avec maclass</p>
<script>
document.getElementById('mondiv').style.color...La fonction setAttribute()
L’utilisation de cette fonction est simple et permet d’accéder à un attribut sur l’élément du DOM, cela peut être le style, une classe, name, id, etc. Pour ce qui est des attributs de style, vous devrez indiquer le nom de la propriété CSS telle qu’elle est indiquée dans un fichier CSS, comme par exemple :
document.getElementById('mondiv').setAttribute('style',
'text-decoration : underline');
document.getElementById('mondiv').setAttribute('class','maclass');
document.getElementById("monInput").setAttribute("type",
"button"); //change un champ input en bouton
Un cas concret : vous désirez ajouter un lien sur un texte à l’écran repéré par un <a id=monLien>, il suffira alors d’ajouter un attribut href sur cet élément, voyez plutôt :
Un exemple de code avant l’utilisation de JavaScript :
<a id="monLien">lien vers google</a>
À l’aide de JavaScript, on ajoute facilement l’attribut href sur cet élément, ainsi le lien devient effectif :
<script>
document.getElementById("monLien").setAttribute("href",
"https://www.google.fr");
</script>
La fonction hasAttribute()
Il est parfois utile de vérifier si un attribut existe ou non avant de l’ajouter ou de le modifier. La fonction hasAttribute() permet d’effectuer cette vérification sur l’élément du DOM que vous désirez contrôler.
L’exemple suivant vérifie simplement que l’élément <a> possède une cible (attribut target), et si oui, on lui affecte la propriété _blank pour que le lien s’ouvre dans un nouvel onglet (ou fenêtre) :
<script>
var item_a = document.getElementById("monItemA");
//vérifie si l'élément <a> possède un attribut target
//si oui, on lui assigne la valeur _blank
if (item_a.hasAttribute("target")) {
item_a.setAttribute("target" , "_blank");
}
</script>
La fonction removeAttribute()
Vous avez vu que l’on peut facilement ajouter un attribut à un élément du DOM, il est également très simple de le supprimer, pour cela vous utilisez la fonction removeAttribute() comme ceci, par exemple pour supprimer un lien sur un élément <a> :
document.getElementById("monItemA").removeAttribute("href");
L’élément identifié par l’id monItemA ne sera désormais plus cliquable.
Exemple de mise en forme d’un élément du DOM
Voici un exemple d’utilisation de JavaScript pour mettre en forme une balise <div> :
<body>
<div id='mondiv'>Bonjour</div>
<script>
document.getElementById('mondiv').style.border =
'solid 1px red'
document.getElementById('mondiv').style.width =
'100px'
document.getElementById('mondiv').style.height =
'50px'
document.getElementById('mondiv').style.background =
'#eee'
document.getElementById('mondiv').style.color =
'blue'
document.getElementById('mondiv').style.fontSize =
'15pt'
document.getElementById('mondiv').style.fontFamily =
'Helvetica'
document.getElementById('mondiv').style.fontStyle =
'italic'
document.getElementById('mondiv').style.textAlign...Accéder aux propriétés de la fenêtre
JavaScript ouvre également l’accès à un très large éventail d’autres propriétés, telles que la fenêtre même du navigateur, sa largeur et sa hauteur, des informations pratiques telles que la fenêtre parente (s’il y en a une), l’historique des URL visitées, etc.
Toutes ces propriétés sont accessibles à partir de l’objet window, le tableau suivant les répertorie toutes, avec une description de chacune d’entre elles :
|
Propriétés |
Assigne ou retourne |
|
closed |
Retourne une valeur booléenne indiquant si une fenêtre a été fermée ou non. |
|
defaultStatus |
Définit ou retourne le texte par défaut dans la barre d’état d’une fenêtre (navigateur). |
|
document |
Renvoie l’objet document dans la fenêtre. |
|
frames |
Retourne un tableau de toutes les frames et iframes dans la fenêtre. |
|
history |
Retourne l’objet history dans la fenêtre qui permet de recenser toutes les URL visitées. |
|
innerHeight |
Définit ou retourne la hauteur interne de la zone de contenu d’une fenêtre. |
|
innerWidth |
Définit ou retourne la largeur interne de la zone de contenu d’une fenêtre. |
|
length |
Retourne le nombre de cadres et d’iframes dans une fenêtre. |
|
location |
Retourne... |
JavaScript en ligne
On peut écrire du code JavaScript en dehors des balises <script>. En effet, il est possible d’insérer des instructions directement dans certaines balises HTML (body, img, etc.), ce qui permet une grande interactivité dynamique.
Par exemple, pour ajouter un effet au survol de la souris sur un élément du DOM, vous pouvez utiliser les instructions onmouseover et onmouseout comme dans l’exemple ci-dessous :
<body>
<img src='logo_ENI.png'
onmouseover="this.src='logo_ENI_Editions.png'"
onmouseout="this.src='logo_ENI.png'">
</body>
La première image (le logo) est chargée à l’affichage de la page. Puis, lorsque vous passez la souris sur le logo, cela déclenche l’événement JavaScript onmouseover qui exécute l’instruction placée entre les guillemets. Dans l’exemple, on remplace la source (attribut src) par une nouvelle image qui sera affichée à la place de la première. Puis, lorsqu’on déplace la souris en dehors de l’image, c’est la première image qui est rechargée à l’aide de l’instruction onmouseout.
Vous avez sûrement aussi remarqué l’utilisation...
Les évènements que JavaScript peut capter
Outre les deux évènements vus dans le paragraphe précédent, JavaScript est capable d’écouter et de déclencher des actions sur l’ensemble des évènements listés ci-dessous :
|
Évènement |
Description |
|
onabort |
Se déclenche lorsqu’une image n’arrive pas à être complètement chargée ou si son chargement est interrompu par l’utilisateur Cet évènement s’applique uniquement à la balise <img>. |
|
onblur |
Se déclenche lorsque l’élément perd le focus. |
|
onchange |
Se produit lorsqu’une modification a lieu sur un champ de saisie. |
|
onclick |
Se déclenche lorsqu’un clic est fait sur l’élément. |
|
ondblclick |
Se déclenche lorsqu’un double clic est fait sur l’élément. |
|
ondragdrop |
Se déclenche lorsque l’utilisateur essaie de glisser/déplacer un élément dans la fenêtre. Cet évènement s’applique à l’objet window. |
|
onerror |
Se déclenche lorsqu’une erreur est rencontrée au chargement de la page. Cet évènement s’applique à l’objet window . |
|
onfocus |
Se déclenche lorsque l’élément a le focus. |
|
onkeydown onkeypress onkeyup |
Ces trois évènements constituent ensemble la saisie d’une touche du clavier :
|
|
onload |
Cet évènement se déclenche lorsque le document a terminé son chargement complet. |
|
onmouseover onmouseout |
Ces évènements se déclenchent lorsque le curseur de la souris survole l’élément (onmouseover) ou bien quitte l’élément (onmouseout). |
|
onmousemove |
Se déclenche lorsque le curseur de la souris se déplace sur le document HTML. |
|
onmousedown onmouseup |
Ces évènements se déclenchent lorsqu’un bouton de la souris est appuyé (onmousedown) ou bien relâché (onmouseup). |
|
onreset |
Permet de réinitialiser les champs d’un formulaire.... |
Ajouter un élément au DOM
JavaScript ne sert pas uniquement à manipuler les éléments du DOM, il permet également d’en créer de nouveaux.
Pour cela, vous pouvez utiliser les fonctions createElement() et appendChild(), voici un exemple qui ajoute une nouvelle balise <div> dans le <body> de la page HTML :
<body>
Cette page contient uniquement ce texte.<br><br>
<script>
alert('Cliquez sur OK pour ajouter une nouvelle balise
<div> dans la page')
newdiv = document.createElement('div')
newdiv.id = 'NewDiv'
document.body.appendChild(newdiv)
newdiv.innerHTML = "Et voila le nouvel element du DOM,
et on le colore en rouge !"
document.getElementById(newdiv.id).setAttribute('style' ,
'color : red')
</script>
</body>
La fonction document.createElement(’div’) permet simplement de créer un nouvel élément et il est stocké dans la variable newdiv. À partir de là, on peut...
Supprimer un élément du DOM
Bien évidemment, s’il est possible d’ajouter des éléments, il est aussi possible d’en supprimer.
Il faut dans un premier temps accéder au nœud parent pour pouvoir ensuite supprimer l’élément du DOM. Dans l’exemple de la section précédente, vous avez créé un élément newdiv (avec l’identifiant "NewDiv"). Pour supprimer cet élément, il va donc falloir procéder ainsi :
<script>
....noeud_parent = newdiv.parentNode
noeud_parent.removeChild(newdiv)
....tmp = pnode.offsetTop //optionnel
</script>
Un élément du DOM doit être rattaché à un nœud parent (body dans l’exemple ci-dessus, en effet, la fonction parentNode retournera [object HTMLBodyElement]). Ensuite, il suffit de supprimer l’élément à l’aide de l’instruction removeChild().
La dernière instruction (tmp = pnode.offsetTop) ne sert qu’à rafraîchir le navigateur pour que l’élément ne soit plus visible à l’écran, ce qui peut être nécessaire sur certaines anciennes versions de navigateur.
Alternative à la création et à la suppression d’un élément
On a vu qu’il est possible de créer des nouveaux éléments dans le DOM, ce n’est pas forcément facile à maîtriser et cela demande un peu de réflexion avant de se lancer dans ce concept. Bien entendu, cela dépend de ce que vous avez à faire, du projet à mettre en œuvre.
Il existe toutefois une alternative qui est très simple à concevoir, dans la mesure où votre projet ne consiste en fin de compte qu’à masquer certains éléments, et à les montrer en fonction de certaines actions de l’utilisateur. Pour cela, il y a des propriétés CSS qui permettent de rendre visibles ou invisibles les éléments désirés.
Constituez votre page dans son ensemble, y compris les éléments qui ne doivent pas nécessairement être affichés au départ. Vous attribuerez à ces éléments la propriété de style display à none, ou la propriété visibility à hidden.
La différence entre ces deux méthodes est la suivante : la propriété display libère la place si elle est à none, c’est-à-dire que les autres éléments de la page situés en dessous remonteront...
Utilisation d’un timer via setTimeout
Il est parfois nécessaire de déclencher une action à intervalle régulier (pour animer votre page web par exemple), ou après un laps de temps déterminé à l’avance (par exemple la fermeture d’une pop-up après dix secondes), etc.
Pour cela, JavaScript met à disposition une fonction nommée setTimeout() qui prend deux paramètres :
-
Le premier représente la fonction qui sera exécutée.
-
Le second est le nombre de millisecondes à attendre avant que la fonction indiquée soit exécutée.
Comme par exemple :
<script>
setTimeout(maFonction, 3000);
function maFonction() {
alert ('je joue le code de maFonction() !');
}
</script>
Ce qui signifie que le code de maFonction() sera exécuté après 3 000 millisecondes.
Essayez ce petit script et vous obtiendrez une pop-up d’alerte au bout de 3 secondes :
Ne saisissez jamais les parenthèses de la fonction appelée dans setTimeout, le résultat attendu ne sera pas correct, en effet, maFonction sera exécutée immédiatement sans attendre le délai spécifié dans le second paramètre.
Vous pouvez également...
La fonction setInterval()
Un autre moyen plus simple pour configurer des appels réguliers consiste à utiliser la fonction setInterval(). L’utilisation est identique à setTimeout() et cela fonctionne exactement de la même manière, mais le code est exécuté à intervalle régulier (spécifié en millisecondes). Cela peut être très utile pour l’affichage d’un compte à rebours ou d’une horloge, comme le montre cet exemple :
<body>
Il est exactement: <span id='compteur'>00:00:00</span><br>
<script>
setInterval("afficheTemps(document.getElementById('compteur'))",
1000)
function afficheTemps(elementId) {
var date = new Date();
elementId.innerHTML =
date.toTimeString().substr(0,8)
}
</script>
</body>
La fonction afficheTemps() est appelée toutes les secondes (1 000 millisecondes), ce qui permet d’afficher l’heure. À l’écran, on obtient par exemple :
La fonction date.toTimeString() renvoie la date dans le format UTC, et en appliquant...
Simplifiez le code
1. Première simplification
Vous avez remarqué que pour accéder à un élément du DOM, on utilise très fréquemment la fonction document.getElementById().
Cette instruction est longue à taper et alourdit un peu le code, je vous propose d’écrire une fonction que l’on va nommer getE() et qui retournera l’élément du DOM, en d’autres termes, l’objet.
Bien évidemment, on va supposer que tous les éléments que l’on va traiter par la suite ont un identifiant (id), sinon le résultat ne sera pas celui attendu.
La fonction getE() est très simple et prend en paramètre un id, on peut donc l’écrire comme ceci :
function getE(id) {
return document.getElementById(id)
}
Si vous insérez cette fonction dans tous les exemples de ce chapitre, vous pourrez alors remplacer tous les appels à document.getElementById() par getE(), ce qui réduit nettement la taille de vos fichiers et améliore la lisibilité de votre code.
2. Deuxième simplification
On ne va pas s’arrêter en si bon chemin, la prochaine étape consiste à simplifier les fonctions qui permettent d’accéder au style d’un élément ou d’un objet. Jusqu’à présent, on procédait comme ceci :...