ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  FIN DE PAGE |  INDEX

CSS : accès par script Valid HTML 4.01 Transitional


En DHTML, on peut également accéder à toutes les propriétés de styles grâce aux langages de scripts ( JavaScript ou VBScript).
 
Le DOM d'Internet Explorer les identifie sous la forme :

Objet.style.fontSize=blue
 
Objet correspondant à la valeur de l'attribut ID de la balise HTML sur laquelle s'appliquera le style.
 
exemple :
 
titre2.style.color=#FF0000
 
Syntaxe générale :

Objet.style.AttributDeStyle

Remarques :

En CSS standard, si une propriété a la syntaxe suivante font-family (avec un tiret) , dans un script, elle sera appelée ainsi :
pg1.style.fontFamily = "Arial"
Le tiret est supprimé, les 2 mots sont réunis ( la première lettre du 2ème passant en majuscule )

Résumé

HTML :

{vertical-align : bottom}

SCRIPT :

Objet.style.verticalAlign = "bottom"

mais aussi :

<TD id=cell1 onmouseover="this.style.verticalAlign='bottom'"> contenu </TD>

La méthose this se référant à l'élément courant ( la cellule d'un tableau, dans l'exemple)

Voici encore quelques exemples de Dynamic HTML que seul Internet Explorer reconnaît actuellement :

Quelques exemples :

1) Ancre avec changement de couleur

Placez le curseur de votre souris sur le lien situé ci-dessous ! Le lien "E-MAIL" change de couleur...

E-MAIL
Voici le code nécessaire...
<A HREF = "javascript://"><span onmouseover = "ie4?this.style.color='black':null" onmouseout = "ie4?this.style.color='chocolate':null">E-MAIL</SPAN></A>

Pour que Netscape ne pose pas de problème, il faut employer la détection d'IE.

Ajoutez : ie4?this.style.color='yellow':null

En procédant ainsi, seul IE appliquera le code tandis que Netscape l'ignorera...

2) Détection des différentes résolutions d'écran

Voici un exemple de scripts pour la détection des différentes résolutions d'écran, de forme assez simple, pour vous permettre une meilleure compréhension.

<SCRIPT LANGUAGE="JavaScript">

if ((screen.width>= 1024)|| (screen.height>=768))
{
document
.styleSheets['r10'].disabled= false;
document
.styleSheets['r8'].disabled= true;
document
.styleSheets['r6'].disabled= true;
}

if
((screen.width<= 640)|| (screen.height<=480))
{
document
.styleSheets['r10'].disabled= true;
document
.styleSheets['r8'].disabled= true;
document
.styleSheets['r6'].disabled= false;
}

if
((screen.width== 800) ||(screen.height== 600))
{
document
.styleSheets['r10'].disabled= true;
document
.styleSheets['r8'].disabled= false;
document
.styleSheets['r6'].disabled= true;
}

</SCRIPT>

Le script vérifie si la condition de résolution est remplie. Si c'est le cas, il active (disabled= false) la feuille de style correspondante et désactive (disabled= true) les deux autres feuilles de style.

Pour "couvrir" toute les résolutions possibles, on a choisi ici des "fourchettes" de résolution (plus petite que 640x600 jusqu'à 1024x768 et plus). Remarquez que la largeur de l'écran est analysée ainsi que sa hauteur...


ACCUEIL |  PAGE PRECEDENTE |  PAGE SUIVANTE |  DEBUT DE PAGE |  INDEX