DHTML CSS

DHTML n'est pas une langue scripting comme le Javascript, mais simplement un dispositif de navigateur, ou le perfectionnement, qui donne � votre navigateur la capacit� d'�tre dynamique. Ce qui veulent vraiment apprendre ne sont pas DHTML lui-m�me mais plut�t, la syntaxe requise pour employer DHTML. C'est la capacit� du navigateur de changer le mod�le d'une page Web et s'occuper de la page a charg�.

Voici une d�monstration simple. le texte au-dessous de la couleur de changement quand la souris se d�place au-dessus de lui :

D�placer votre souris ici

Le code regarde le go�t :

Move your mouse here

Afin d'obtenir cet effet, j'ai acc�d� la premi�re fois de l'identification de l'�l�ment. Puis, par l'objet de mod�le, et finalement la propri�t� de couleur du mod�le. Toutes les propri�t�s de mod�le sont lecture/�criture, et sont acc�d�es d'une fa�on semblable : nom d'object->property d'id->style d'�l�ment.

DHTML inclut le CSS et le Javascript

Au moyen de Javascript, DHTML est changer des d�clarations de mod�le d'un �l�ment de HTML. Par exemple, si vous avez un paragraphe avec un certain texte, la couleur a d�fini pr�s

p {color: #cc0000;}

vous pouvez faire quelque chose comme

element.style.color = '#00cc00';

d�s que ce morceau de manuscrit sera ex�cut� la couleur des textes change de rouge en le vert.

Malheureusement ce peu simple de DHTML n'est pas soutenu par Netscape 4. En fait, Netscape 4 soutient seulement se d�placer des �l�ments � travers la page et les rendre choses invisibles (et quelques autres, mais ce sont les plus importants) et �vidents. Ainsi nous donnons � un �l�ment une position sur la page :

div {position: absolute;
top: 20px;
left: 0px;}

et changer alors sa gauche :

element.style.left = 200;

Maintenant l'�l�ment se d�place comme par magie � 200 Pixel de la marge gauche de la page.

La propri�t� de mod�le

Tellement g�n�ralement, vous allez d'abord � l'�l�ment de HTML dans l'Internet Explorer que vous voulez influencer comme : -

document.all['tobechanged'].style.left = 200;

changer alors les d�clarations de mod�le :

element.style.styleDeclaration

Si vous voulez changer la couleur, le styleDeclaration est couleur, si vous voulez changer la gauche, il est parti. Si vous voulez changer une d�claration de mod�le avec un tiret dans lui, par exemple le z-index, enl�vent le tiret et font � la premi�re lettre apr�s le tiret un capital : zIndex. M�mes pour le marginLeft marge-gauche de =>.

Noter que la propri�t� de mod�le refl�te les mod�les int�gr�s de l'�l�ment. C'est important si vous voulez donner lecture les mod�les de l'�l�ment. Si vous essayez de donner lecture la couleur du paragraphe :

p#testP {color: #cc0000;}

This is the paragraph.

alert([testP].style.color);

vous obtenez une alerte vide. C'est parce que le P pas (encore) ont un mod�le int�gr� de couleur. Le mod�le d�fini par le p#testP n'est pas lisible par la propri�t� de mod�le.
Vous d�finissez vos mod�les en ligne, il travaille tr�s bien

This is the paragraph.

alert([testP].style.color);

Netscape 4

La propri�t� de .style est exig�e dans tous les navigateurs, except� Netscape 4

L'�l�ment correct

Changer ainsi le mod�le d'un certain �l�ment de HTML n'est pas difficile, sauf que beaucoup de choses ne fonctionneront pas dans Netscape 4. Cependant, vous devez �galement dire au navigateur quel �l�ment de HTML vous voulez influencer. Pour faire ceci, vous devez l'appeler par son identification correcte d'�l�ment

[content of div]

et �crire le manuscrit de DHTML pour inviter cette identification :

[element with ID=tobechanged].style.left = 200;

Il y a deux probl�mes ici. est d'abord la d�finition appropri�e d'une couche dans Netscape 4, et est en second lieu les diff�rences dans DOM (mod�le d'objet de document) entre les divers navigateurs.

Couches dans Netscape 4

Si vous voulez changer le mod�le d'un �l�ment dans Netscape 4, cet �l�ment doit avoir une d�claration de position dans la feuille de mod�le. Si vous ne lui donnez pas une position, Netscape 4 simplement n'identifie pas l'�l�ment comme couche et ne le jette pas vers le haut des messages d'erreur.

Par exemple :

div#tobechanged {position: absolute;
top: 20px;
left: 0px;}

Maintenant la division avec ID= " tobechanged " a une position et Netscape 4 l'identifie comme couche. Vous pouvez �galement employer la position : relatif. Ceci signifie que l'�l�ment est plac� par l'�coulement normal de la page, mais est n�anmoins ouvert d'influence de DHTML.

Faire ainsi attention pour donner � vos couches une position.