Principe

Nous avons aperçu les difficultés que posait le DHTML. Voyons maintenant le principe de la programmation. Cette page présente les principes préconisés par la norme HTML, compatible donc avec Internet Explorer 5 et plus et Netscape 6.

Les objets du DHTML
En HTML, tous les éléments de la page sont considérés comme des objets de type différent. Les images, les liens, les formulaires, les champs de formulaires, etc sont des objets que le javascript peut déjà manipuler.
Le DHTML introduit la notion de calque ou couche ou layer.
Ces calques sont à la base du DHTML car ils vont pouvoir être manipulés : déplacés, cachés, modifiés, redessinés...
Un calque est défini par le couple de balises <DIV> et </DIV>
Les calques
Un calque doit posséder :
- un identifiant, pour le répérer
- un style d'affichage, pour indiquer sa position, sa taille, sa couleur, etc...
- un contenu, qui sera affiché
L'identifiant est enregistré grâce à l'attribut id. Sur une page, l'identifiant de tous les calques (et de tous les autres objets) doit être unique, pour éviter les ambiguités. Une erreur ne surviendra pas forcément en cas de doublons, mais le fonctionnement normal risque d'être perturbé.
Le style est enregistré grâce à l'attribut style. C'est une chaîne de caractères au format css (Voir la page sur les feuilles de style)
Le contenu est du code HTML (texte, tableaux, images...) placé entre les balises <DIV et </DIV>

Le code suivant place le tableau sur fond jaune contenant le texte Ceci est un calque dans un calque dont le coin supérieur gauche est à 200 pixels du haut de la page et à 100 pixels du bord gauche.
<DIV id="moncalque" style="position:absolute;top:200px;left:100px;visibility:hidden;background-color:yellow">
Ceci est un calque
</DIV>

Manipuler les calques avec Javascript
Ceci est un calque
Le calque peut être accédé par javascript grâce à la fonction document.getElementById qui retourne l'objet calque.
Manipulation de visibilité et de position
L'objet de type calque ainsi retourné a comme propriété un nouvel objet style qui contient toutes les propriétés d'affichage du calque : visibilité, position, dimensions, couleurs, ... Cet objet style est souvent manipulé dans le DHTML.
Cette ligne montre le calque identifié comme moncalque
  document.getElementById("moncalque").style.visibility="visible";

Cette ligne cache le calque identifié comme moncalque
  document.getElementById("moncalque").style.visibility="hidden";

Pour déplacer le calque, utilisez les propiétés top et left
  document.getElementById("moncalque").style.left=500;
  document.getElementById("moncalque").style.top=parseInt(document.getElementById("moncalque").style.top)+10;

Pour modifier la taille du calque, utilisez :
   document.getElementById("moncalque").style.width=parseInt(document.getElementById("moncalque").style.width)-20;

Attention, il n'est possible en javascript de modifier un attribut seulement si il a été défini dans la création du calque dans la zone de style de la balise DIV

Sur cette page, le calque moncalque est caché, cliquez sur les liens ci-dessous pour le rendre visible ou invisible.
Montrer le calque | Cacher le calque | Déplacer vers la gauche | Descendre
Rétrécir | Agrandir

Manipulation sur le style
Pour changer la couleur de fond, on utilise l'attribut backgroundColor
  document.getElementById("moncalque").style.backgroundColor="red";

On peut aussi changer la couleur du texte :
  document.getElementById("moncalque").style.color="blue";