Le positionnement du contenu

Les fontes downloadables

Conclusion et exemples sur le Net

LES FEUILLES DE STYLE : Avec Javascript et DOM

Qu'est ce que le DOM ?:

Dom signifie "Document Object Model". Il permet, comme son nom le suggère, d'attribuer un nom ou "ID" à chaque élément sur l'écran.Concrètement, ce nom va fonctionner comme une adresse postale.En utilisant un langage de script, comme Javascript par exemple, il va être possible de changer dynamiquement les propriétés d'un élément alors qu'il est déjà présent sur l'écran.

Le problème réside dans le fait que Netscape Navigator et Internet Explorer ont prévu différemment leur DOM. Il est cependanr possible de créer du DHTML qui fonctionne sur les deux plates-formes.

Voici un exemple qui utilise à la fois le DOM et Javascript pour définir une feuille de style:

<STYLE TYPE="text/javascript">

document.tags.P.fontSize="18pt";

tags.H1.color="blue";

</STYLE>

Autre exemple: spécifier plusieurs propriétés pour un élément

with (tags.P) {

color="green";

font-weight="bold";

font-style="italic";

font-family="helvetica";

}

Voici enfin l'exemple donné au point précédent mais avec Javascript cette fois:

Les <P> ont des marges à gauches et à droite, leur texte est centré entre les deux marges.

Les <H4> sont soulignés et en vert.

Les <H5> sont "uppercase", ils ont une bordure rouge qui est de quatre points de large.

Le texte est en rouge et la couleur de font est jaune.

Les éléments situés dans la marge sont en bleu italique avec un interligne qui est de 150% plus haut que la grandeur des fontes.

La première ligne est indentée de 10% de la largeur de l'élément.

Code:

<STYLE TYPE="text/CSS">

with (tags.P 9) {

textAlign="center"; margin-left="20%"; margin-right="20%";}

with (tags.H4) {

textDecoration="underline";color="green";}

with (tags.H5 ) {

textTransform="uppercase";color="red";

borderWidth="4pt"; borderStyle="outset";

backgroundColor="yellow"; padding="4pt";

borderColor="red";}

with (tags.BLOCKQUOTE ) {

color="blue"; fontStyle="italic";

lineHeight="1.5"; textIndent="10%";}

</STYLE>

haut de la page

retour page travaux

Catherine Roulet - juin '99