1 Plan: Le calque version MIE et Netscape 6 Ecriture dynamique des calques Ecriture dynamique d'un tableau L'objet style du calque version MIE et Netscape

1

Plan:

Le calque version MIE et Netscape 6

Ecriture dynamique des calques

Ecriture dynamique d'un tableau

L'objet style du calque version MIE et Netscape 6

E. ChristoffelMCF, ULP

Calques et Styles en DHTML

Le langage Javascript pour le web

et application au DHTML

2

Le calque version MIE et Netscape 6, Balise HTML

Les calques sont définis de façon unique sous Netscape 6 et MIE par la balise <div>, et les attributs id et style avec, si l'on souhaite gérer son positionnement dynamiquement, la propriété de position absolue ou relative, :<div id="identificateurID" style="position:absolute;…">…</div><div id="lId" class="laClasse">…<div>

Dans ce dernier cas, une classe aura été définie par la balise <style> … </style>:<style>.laClasse{position:absolute;…}</style>Sous MIE, ce calque appartient à la collection de tous les objets all[ ], et peut être accédé grâce à son identificateur (valeur de l’attribut id):

var lObj1=document.all['identificateurID'];var leNom="lID";var lObj2=document.all[leNom];

Une méthode, commune à MIE 5.x et Netscape 6, permet d'accéder également au calque à partir de son identificateur:var lObj1=document.getElementById('identificateurID');var leNom="lID";var lObj2=document.getElementById(leNom);

Référence par l'identificateur

Référence par une variable

3

Le calque version MIE et Netscape 6, propriétés, méthodes et événements

Pour tout calque (ou presque tout objet ayant un identificateur), des propriétés sont lues ou écrites, des méthodes sont appliquées, des événements sont détectés:lObj.propriétélObj.méthode()où la définition de lObj dépend du navigateur:lObj=document.all['nomCalque']; // pour MIE4.x et MIE 5.xlObj=document.getElementById('nomCalque'); // pour N6 et MIE 5.x

PropriétésMIE N6 NS4

Accès à la class (c-à-d le style) attribué à l'élément par l'attribut class d'une balise HTML.

L/ E L/ E

Permet l'accès au document contenant le calque, et donc aux objets du document.

L

Accès à l'identificateur (attribut ID d'une balise HTML) L/ E L/ E L

accès au code HTML et texte contenus entre les balises HTML <BALISE ID="…"> et </BALISE>

L/ E L/ E

accès uniquement au texte contenu entre les balises HTML <BALISE ID="…"> et </BALISE>

L/ E

accès au code HTML et texte contenus entre les balises HTML <BALISE ID="…"> et </BALISE>, y compris les balises de l'objet

L/ E

identique à innerText L/ ELecture de la hauteur de l'élément par rapport à son conteneur L LLecture de la position gauche de l'élément par rapport à son L LLecture de la position haute de l'élément par rapport à son conteneur L LLecture de la largeur de l'élément par rapport à son conteneur L LAccès au conteneur du calque, celui dans lequel les coordonnées ci-dessus sont calculées.

L

Accès à l'objet conteneur, dont on peut alors manipuler les propriétés, méthodes et événements.

L

Accès à l'objet Style du calque L/ E L/ E

Lecture de la balise HTML de l'élément. L LAccès à l'attribut title de la balise, utili pour créer une 'info-bulle'. L/ E L/ E

stylevar laStyle=lObj.style; lObj.style.color="red";

tagNamevar laBalise=lObj.tagName;

var valeur=lObj.offsetTop;

offsetParent

lObj.title="l'info bulle!"; title

offsetWidthoffsetTop

var valeur=lObj.offsetWidth;

var leCode=lObj.outerHTML;

var leParent=lObj.offsetParent;

parentElementvar leParent=lObj.parentElement;

var valeur=lObj.offsetHeight; offsetHeight

var valeur=lObj.offsetLeft; offsetLeft

var lID=lObj.id; lObj.id="nouvelID";

id

var leCode="<P>test<BR>re-test"; lObj.innerHTML=leCode;

innerHTML

innerText

var leText=lObj.outerText;

outerHTML

outerTextcode J

S

var laClasse=lObj.className; lObj.className="nouvelleClasse";

className

leDoc=lObj.document; document

var leText=lObj.innerText;

4

Exercice: • créer un document HTML contenant un calque avec un style de positionnement absolu défini via une classe• au chargement de la page, exécuter une fonction debut()• dans le code javascript, tester le type de navigateur • dans la fonction debut(), tester l'ensemble des propriétés de l'objet calque, en fonction du type du navigateur• sous MIE, sonder la propriété parentElement, identifier la balise HTML correspondante, puis rechercher pour cette dernière l'élément parent…

Méthodes MIE N6 NS4

Force le click de souris sur lélément x

Retrouve la valeur de l'attribut d'une balise d'ID donnée, le booléen

précise si la casse est un paramètre sensible.x x

Crée un nouvel attribut pour une balise d'ID donnée. 3 paramètres:nom

de l'attribut, sa valeur et le booléen précise si la casse est un x x

Supprime un attribut, dont on précise si la casse doit être respectée.

Retourne true si l'opération a réussi. x

x

x

Action sur les scrollbars de la fenêtre du navigateur pour que le bas

(false) ou le haut (true) de l'objet soit visible.x

Evénements

Détection de l'événement 'click' de souris sur l'élément x x

Détection de l'événement 'onhelp' ou touche F1, lorsque l'élément à le

focus.x

Détection de l'événement 'double click' de souris sur l'élément x x

Détection de l'événement 'click bouton' de souris sur l'élément x x

Détection de l'événement 'souris au-dessus' de l'élément x x

Détection de l'événement 'souris en-dehors' de l'élément x x

var val=lObj.getAttribute("leNom",true);

removeAttribute("attribut",boolen)

insertAdajacentText("position","chaîneTexte")

<div id="leDiv" onhelp="lAide(this)>…</ div> onhelp

insertAdajacentHTML("position","chaîneTexte")

<div id="leDiv" onclick="alert('message')>…</ div> onclick

lObj.setAttribute("leNom","Valeur",true);

lObj.scrollIntoView(true);

ces événements seront utilisés différemment,

et non dans la balise elle-même d'une manière

générale

ondblclick

onmousedown

onmouseover

onmouseout

click()

getAttribute("attribut",boolen)

setAttribute("attribut","valeur",boolen)

Rajoute, soit du code HTML et du texte, soit du texte uniquement en

fonction de la position: BeforeBegin, AfterBegin, BeforeEnd, AfterEnd

(soit avant ou après la balise HTML de début ou de fin de l'objet.

lObj.click();

scrollIntoView(booléen)code J

S

reussi=lObj.removeAttribute("leNom",true);

lObj.insertAdajacentHTML("AfterBegin","texte");

5

Plan:









6

Ecriture dynamique des calques: les méthodes en fonction des navigateurs

Il est possible de ré-écrire le contenu des calques, aussi bien sous MIE, que sous Netscape 4.x et Netscape 6.

En effet d'une part, l'objet layer (la collection d'objet layers[ ]) est considéré comme un document en soi, est possède donc toutes les propriétés de l'objet document, et notamment les méthodes write() et close().Ce sont ces méthodes qui seront utilisés pour la modification dynamique du contenu d'un calque défini par la balise <DIV>, aussi bien pour du texte que du code HTML. Soit un calque:<div id="leDiv" style="position:absolute;…">…</div>La seule contrainte est que, sous Netscape 4.x, le calque ait la propriété de style position:absolute ou position:relative!

On écrira le code HTML dans une variable chaîne de texte, qui sera appliqué au calque par la méthode write():var leCodeHTML;leCodeHTML='<table width="300"><tr><td><span style="color:blue;text-decoration:line-through">cellule 1</span></td><td>cellule 2</td></tr></table>'document.layers['leDiv'].document.write(leCodeHTML);document.layers['leDiv'].document.close();

En conclusion, en prévision d'une modification dynamique d'un calque, celui-ci devra avoir un style avec positionnement relatif ou absolu, et la hiérarchie d'accès devra être maîtrisée (cas de calques imbriqués).

7

D'autre part sous MIE et Netscape 6, les calques s'accèdent directement soit par la collection d'objets all[ ] (MIE 4.x et MIE 5.x), soir par la méthode getElementById( ) (MIE 5.x et Netscape 6), sans se préoccuper de la hiérarchie (ou niveau d'imbrication des calques)!

La propriété innerHTML, en lecture/écriture, permet d'extraire le code HTML d'un calque, ou de le ré-écrire.

L'exemple précédent devient:document.all['leDiv'].innerHTML=leCodeHTML; // pour MIE 4.x et MIE 5.xdocument.getElementById('leDiv').innerHTML= leCodeHTML; // pour Netscape 6 et MIE 5.x

Exercice: • étudier les propriétés innerText, outerHTML et outerText, sous MIE uniquement.• Réaliser un compteur qui affiche le nombre de click sur un bouton de formulaire, suivant le modèle:

fig. : Etat initial fig. 2: Etat après un 1er click

Règles de conception:• appeler une fonction init( ) au chargement du document• sous MIE et N6, réaliser un calque d'identificateur compteur, avec la remarque de l'état initial (fig. 1)• dans un formulaire, insérer un bouton avec le gestionnaire dévénement onclick pointant sur une fonction nommée comptage( )• détecter le type de navigateur et initialiser le compteur compte à 0• programmer la fonction init( ) pour récupérer l'objet calque• programmer la fonction comptage( ), à savoir incrémentation du compteur réécriture du code HTML du calque dans une variable (fig. 2) écriture dynamique du calque• comment modifier ce script pour le rendre compatible NS4?

HTM

LJS

8

Développements possibles:Grâce aux propriétés visibility et innerHTML (ou document.write( )), on peut: • s'affranchir des fenêtres de type alert(), • s'affranchir d'ouverture de fenêtres annexes du navigateur (window.open(…)) pour l'affichage 'à la volée' de page HTML générée dynamiquement• créer un petit site uniquement dans une seule page HTML• créer des zones d'aide, ou info-bulle• ré-écriture de calques pour la modification dynamique de style sous Netscape 4.x• etc...

Solu

tion

Code JS

<body onload="init()"><div id="compteur" style="position:absolute;top:50px">vous avez cliquez 0 fois</div><form name="leForm"><input type="button" value="click!" onclick="comptage()"></form></body>C

ode H

TM

Lvar IE4=(document.all && !document.getElementById)? true : falsevar IE5=(document.all && document.getElementById)? true : falsevar NS4=(document.layers)? true : falsevar N6=(!document.all && document.getElementById)? true : falsevar lObj;var compte=0;function init() {if ( NS4 ) {lObj=document.layers['compteur'];alert(lObj); }else if ( IE4 || IE5 ) {lObj=document.all['compteur']; }else {lObj=document.getElementById('compteur'); }}

function comptage() {compte++;codeHTML="Vous avez déjà cliquez "+compte+" fois";if ( NS4 ) {lObj.document.write(codeHTML);lObj.document.close() }else {lObj.innerHTML=codeHTML; }}

9

Plan:









10

Ecriture dynamique des tableaux (MIE uniquement):limites de la prorpiété innerHTML

Si la propriété innerHTML permet de lire le contenu HTML situé entre les balises <balise>…</balise>, sous MIE et Netscape 6, elle ne permet d'écrire un contenu HTML que pour certaines balise!

En l'occurrence, pour les balises <table>…</table> et <tr>…</tr>, la propriété innerHTML ne peut être que lue, et non écrite, en raison de la structure complexe d'un tableau HTML: un tableau contient des lignes, où ces dernières contiennent des cellules. Il n'y a que la cellule du tableau <td>…</td> où la propriété innerHTML peut être lue et écrite.

Rappel de la structure HTML d'un tableau:<table id="laTableID" width="600" cellpadding="0" cellspacing="0" border="1"><col width="150"><col width="100"><col width="350"><caption valign="top">Liste des numéros de téléphone</caption><thead><tr id="entete"><th>Nom</th><th>Prénom</th><th>Téléphone</th></tr></thead><tbody id="mainID"><tr><td>Christoffel</td><td>Eric</td><td>03.90.24.06.35</td></tr></tbody></table>

Se documenter sur les balises:(msdn.microsoft.com/library)tabletheadtbodytfootcaptioncolcolgrouptrtdth

11

Le Table Object Model: création et manipulation du contenu d'une tableLe Table Object Model (à comparer au Document Object Model, plus général qui répertorie tous les objets dans la fenêtre du navigateur) contient des méthodes et des collections, afin de créer et manipuler le contenu d'un tableau HTML.

Les collections:

Les principales collections sont rows et cells, qui sont des objets Array sous javascript, et contiennent une référence vers chaque ligne du tableau HTML, et chaque cellule d'une ligne du tableau HTML, respectivement. La syntaxe est la suivante:

document.all['tableID'].rows.length

document.all['tableID'].rows[0].cells.length

document.all['ligneID'].cells.length

Exemple (d'après le code HTML de la diapositive précédente):alert(document.all['laTableID'].rows.length);alert(document.all['laTableID'].rows[0].cells.length);alert(document.all['enteteID'].cells.length);

Les méthodes:

insertRow() et deleteRow() permettent d'insérer ou de supprimer des lignes, uniquement dans le corps d'un tableau HTML, à savoir dans la balise <tbody> d'un tableau, déjà déclarée dans le code HTML.

insertCell() et deleteCell() permettent d'insérer ou de supprimer des cellules dans une ligne de tableau, déclarée dans le code HTML ou créée par la méthode insertRow(). Pour une cellule ainsi créée, la propriété innerHTML permet maintenant d'y écrire du code HTML.

Lecture du nombre de ligne d'un tableau

Lecture du nombre de cellule d'une ligne donnée

Accès directe à une ligne via l'identificateur

Se documenter sur les collections et méthodes du Table Object Model sur le site msdn.microsoft.com/library

12

Exercices d'application des méthodes insertRow() et insertCell()Du tableau HTML créé précédemment:• lire le nombre de ligne• lire le nombre de cellule d'une ligne donnée, par différent accès (identificateur du tableau, d'une ligne)• Effacer la ligne de données (contenant déjà un nom, prénom et numéro de téléphone)• Créer une source de données employé, à l'aide d'un constructeur d'objets personnalisés. Array javascript des employés: lesEmployes, dont chaque élément est un objet personnalisé employe, de propriétés nom, prénom et telephone.• Créer une nouvelle ligne du tableau HTML pour chaque employé, contenant trois cellules, et y écrire les données correspondantes• Agir sur les propriétés des cellules (align, bgcolor, class et style [voir chapitre suivant])

function init() {alert(document.all['laTableID'].rows.length);alert(document.all['laTableID'].rows[0].cells.length);alert(document.all['enteteID'].cells.length);

document.all['laTableID'].deleteRow(1);alert(document.all['laTableID'].rows.length);

nbEmploye=lesEmployes.length;for ( var i=0; i<nbEmploye; i++ ) {laLigne=document.all['mainID'].insertRow();laCell=laLigne.insertCell();laCell.innerHTML=lesEmployes[i].nom;laLigne.insertCell().innerHTML=lesEmployes[i].prenom; laLigne.insertCell().innerHTML=lesEmployes[i].telephone; }}//--></SCRIPT>

<SCRIPT LANGUAGE="JavaScript"><!--

lesEmployes = new Array();lesEmployes[0]=new employe("Faerber","Richard","03.90.24.57.68");lesEmployes[1]=new employe("Christoffel","Eric","03.90.24.06.35");

function employe(leNom,lePrenom,leTelephone) {this.nom = leNom;this.prenom = lePrenom;this.telephone = leTelephone;}

13

Plan:




L'objet style du calque version MIE et

Netscape 6





14

L'objet style du calque version MIE et Netscape 6, propriétés

Il est illusoire de vouloir gérer dynamiquement les styles sous Netscape 4.7, sauf à réécrire le contenu de calques par la méthode document.write(), suivie de document.close(). Sous MIE et Netscape 6, cela devient un jeu d'enfant!

Pour un objet d'indentificateur donné, lID par ex., l'objet style est une propriété de l'objet:document.all['lID'] ou document.getElementById('lID'), suivant le navigateur. Une propriété de style est lue ou écrite suivant:laValeur=document.all['lID'].style.propriété;document.all['lID'].style.propriété="valeur de la propriété"; laValeur=document.getElementById['lID'].style.propriété;document. getElementById['lID'].style.propriété="valeur de la propriété";

Pour une gestion dynamique du style de mise en forme du texte (taille police, choix police, alignement etc…), il n'est pas obligatoire d'avoir un style de position absolu ou relatif!

Distinguons les étapes d'écriture et de lecture dynamique des styles.

la valeur est une chaîne de texte!

Ecriture de la propriété de style

Aucune ambiguïté, soit un calque défini par les attributs class ou style:

<style> .laClasse{color:red;}</style><div id="lID" class="laClasse">le texte</div>

ou <div id="lID" style="color:red">le texte</div>

Toute propriété peut être écrite:document.getElementById('lID').style.color="blue"; document.getElementById('lID').style.backgroundColor="yellow";

15

Lecture de la propriété de style

Considérons un calque <div>. Il faut distinguer 2 cas, suivant que le style ait été déclaré a) par l'attribut style de la balise HTML <div>, ou b) via une class par l'attribut class. Dans ce dernier cas, la class est définie dans l'entête du document par une balise HTML <style>…</style>.

Cas a)

<div id="lID" style="color:red">le texte</div>la lecture d'une propriété de style retournera une valeur, uniquement si la propriété est explicitement citée dans l'attribut style:laValeur=document.getElementById('lID').style.color; // retournera redlaValeur=document.getElementById('lID').style.backgroundColor; // ne retourne rien!

En revanche, l'objet currentStyle (objet en lecture seule), retourne une valeur dans tous les cas, sous MIE uniquement!laValeur=document.getElementById('lID').currentStyle.color; // retourne redlaValeur=document.getElementById('lID').currentStyle.backgroundColor; // retourne transparent

Cas b)

<style> .laClasse{color:red;}</style><div id="lID" class="laClasse">le texte</div>la lecture d'une propriété de style ne retourne aucune valeur:laValeur=document.getElementById('lID').style.color; // ne retourne rien!laValeur=document.getElementById('lID').style.backgroundColor; // ne retourne rien!

A nouveau, l'objet currentStyle, retourne une valeur dans tous les cas, sous MIE uniquement!laValeur=document.getElementById('lID').currentStyle.color; // retourne redlaValeur=document.getElementById('lID').currentStyle.backgroundColor; // retourne transparent

16

background background backgroundAttachment background-attachment backgroundColor background-color backgroundImage background-image backgroundPostion background-position backgroundRepeat background-repeat border border borderBottom border-bottom borderBottomColor border-bottom-color borderBottomStyle border-bottom-style borderBottomWidth border-bottom-width borderColor border-color borderLeft border-left borderLeftColor border-left-color borderLeftStyle border-left-style borderLeftWidth border-left-width borderRight border-right borderRightColor border-right-color borderRightStyle border-right-style borderRightWidth border-right-width borderStyle border-style borderTop border-top borderTopColor border-top-color borderTopStyle border-top-style

borderTopWidth border-top-width borderWidth border-width clear clear clip clip color color cursor cursor display display filter filter font font fontFamily font-family fontSize font-size fontStyle font-style fontVariant font-variant fontWeight font-weight height height left left letterSpacing letter-spacing lineHeight line-height listStyle list-style listStyleImage list-style-image listStylePosition list-style-position listStyleType list-style-type margin margin marginBottom margin-bottom marginLeft margin-left

marginRight margin-right marginTop margin-top overflow overflow paddingBottom padding-bottom paddingLeft padding-left paddingRight padding-right paddingTop padding-top pageBreakAfter page-break-after pageBreakBefore page-break-before position position styleFloat float textAlign text-align textDecoration text-decoration textDecorationBlink text-decoration textDecorationLineThrough text-decoration textDecorationNone text-decoration textDecorationOverline text-decoration textDecorationUnderline text-decoration textIndent text-indent textTransform text-transform top top verticalAlign vertical-align visibility visibility width width zIndex z-index

Correspondance entre les propriétés de style définies dans une balise HTMLet les propriétés de l'objet Style en javascript

Propriétés de style

Syntaxe dans une balise HTML:<balise id="nom_objet" attribut1="valeur1" ... style="propriété1:valeur1;…">

Propriété de l'objet Style Syntaxe javascript:

document.all['nom_objet'].style.propriété="texte fixant la propriété"document.getElementById('nom_objet'). style.propriété="texte fixant la propriété"

17

Par défaut, les liens hypertextes sont de couleur bleue et soulignés, ce qui peut ne pas correspondre à la charte graphique du site! Il est alors nécessaire de forcer un style dans la balise HTML <a href…>…</a>, en précisant, entre autres, les propriétés color et text-decoration. Soit par ex. une définition de style dans le code HTML:<style >.leLienOut{color:green;text-decoration:none;}.leLienOver{color:red;text-decoration:none;}</style>

Le lien dans la partie BODY du document HTML a été défini ainsi:<a href="#" onmouseover="lien('leLien',true)" onmouseout="lien('leLien',false)" class="leLienOut" id="leLien">texte du lien</a>

Un identificateur est défini pour le lien. La classe 'leLienOut' force un nouveau style pour le lien.De plus, afin de distinguer le lien, nous détectons les événements 'souris au-dessus' et 'souris en dehors', événements auxquels sont associés la fonction lien(identificateur, booléen), d'argument l'identificateur du lien et un booléen true/false suivant le cas souris au-dessus ou en-dehors.

Problème: écrire la fonction qui permet de modifier dynamiquement le style du lien de leLienOut à leLienOver, est inversement:• accéder l'objet. Lequel?• quelle propriété permet de changer de style, de class?

style du lien dans le cas souris en-dehors

style du lien dans le cas souris au-dessus

L'objet style du calque version MIE et Netscape 6, exercices

18

Niveau Expert:a) s'affranchir du passage en argument de l'identificateur de l'objet, et dans la fonction de la recherche de l'objet par la méthode getElementById(). Développer une solution avec l'objet this. Discuter l'intérêt de cette dernière solution.

b) sous MIE 5.x, on se propose, plutôt que d'appeler une nouvelle class, de changer dynamiquement la propriété color (ou tout autre) de cette class. Afin de proposer une solution, rechercher les propriétés et informations sur les collections styleSheets[ ], rules[ ] et finalement l'objet style et ses propriétés. Combiner ces objets dans une hiérarchie adéquate.

c) trouver une solution comparable sous N6 (il n'est pas sûr qu'elle existe!)

d) il semblerait qu'il n'existe aucune solution simple et utile/efficace sous Netscape 4.x, en effet Netscape 4.x ne supporte pas les feuilles de style dynamiques. Mais sait-on jamais… qu'un expert…

e) étudier la propriété cssText de l'objet style sous MIE. Se documenter sur internet, fichier d'aide, puis programmer un exemple.

g) Proposer une solution uniquement basée sur les feuilles de style, sans javascript et DHTML!

function lien(lID,over) {if(document.getElementById){ // test des navigateurs MIE 5.x et N6lObj2=document.getElementById(lID);(over) ? lObj2.className="leLienOver" : lObj2.className="leLienOut"} // fin test if} // fin fonction

Solution réception des arguments d'appels

19

accelerator Sets or retrieves a string that indicates whether the object contains an accelerator key. background Sets or retrieves up to five separate background properties of the object. backgroundAttachment Sets or retrieves how the background image is attached to the object within the document. backgroundColor Sets or retrieves the color behind the content of the object. backgroundImage Sets or retrieves the background image of the object. backgroundPosition Sets or retrieves the position of the background of the object. backgroundPositionX Sets or retrieves the x-coordinate of the backgroundPosition property. backgroundPositionY Sets or retrieves the y-coordinate of the backgroundPosition property. backgroundRepeat Sets or retrieves how the backgroundImage property of the object is tiled. behavior Sets or retrieves the location of the DHTML Behaviors. border Sets or retrieves the properties to draw around the object. borderBottom Sets or retrieves the properties of the bottom border of the object. borderBottomColor Sets or retrieves the color of the bottom border of the object. borderBottomStyle Sets or retrieves the style of the bottom border of the object. borderBottomWidth Sets or retrieves the width of the bottom border of the object.

borderCollapseSets or retrieves a value that indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML.

borderColor Sets or retrieves the border color of the object. borderLeft Sets or retrieves the properties of the left border of the object. borderLeftColor Sets or retrieves the color of the left border of the object. borderLeftStyle Sets or retrieves the style of the left border of the object. borderLeftWidth Sets or retrieves the width of the left border of the object. borderRight Sets or retrieves the properties of the right border of the object. borderRightColor Sets or retrieves the color of the right border of the object. borderRightStyle Sets or retrieves the style of the right border of the object. borderRightWidth Sets or retrieves the width of the right border of the object. borderStyle Sets or retrieves the style of the left, right, top, and bottom borders of the object. borderTop Sets or retrieves the properties of the top border of the object. borderTopColor Sets or retrieves the color of the top border of the object. borderTopStyle Sets or retrieves the style of the top border of the object. borderTopWidth Sets or retrieves the width of the top border of the object. borderWidth Sets or retrieves the width of the left, right, top, and bottom borders of the object.

bottomSets or retrieves the bottom position of the object in relation to the bottom of the next positioned object in the document hierarchy.

clearSets or retrieves whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.

20

clip Sets or retrieves which part of a positioned object is visible. color Sets or retrieves the color of the text of the object. cssText Sets or retrieves the persisted representation of the style rule. cursor Sets or retrieves the type of cursor to display as the mouse pointer moves over the object. direction Sets or retrieves the reading order of the object. disabled Sets or retrieves whether a style sheet is applied to an style object. display Sets or retrieves whether the object is rendered. filter Sets or retrieves the filter or collection of filters applied to the object. font Sets or retrieves up to six separate font properties of the object. fontFamily Sets or retrieves the name of the font used for text in the object. fontSize Sets or retrieves the size of the font used for text in the object. fontStyle Sets or retrieves the font style of the object as italic, normal, or oblique. fontVariant Sets or retrieves whether the text of the object is in small capital letters. fontWeight Sets or retrieves the weight of the font of the object. height Sets or retrieves the height of the object. imeMode Sets or retrieves the state of an Input Method Editor (IME). layoutFlow Sets or retrieves the direction and flow of the content in the object. layoutGrid Sets or retrieves the composite document grid properties that specify the layout of text characters. layoutGridChar Sets or retrieves the size of the character grid used for rendering the text content of an element. layoutGridLine Sets or retrieves the gridline value used for rendering the text content of an element. layoutGridMode Sets or retrieves whether the text layout grid uses two dimensions.layoutGridType Sets or retrieves the type of grid used for rendering the text content of an element. left Sets or retrieves the position of the object relative to the left edge of the next positioned object in the document hierarchy. letterSpacing Sets or retrieves the amount of additional space between letters in the object. lineBreak Sets or retrieves line-breaking rules for Japanese text. lineHeight Sets or retrieves the distance between lines in the object. listStyle Sets or retrieves up to three separate listStyle properties of the object. listStyleImage Sets or retrieves which image to use as a list-item marker for the object.listStylePosition Sets or retrieves how the list-item marker is drawn relative to the content of the object. listStyleType Sets or retrieves the predefined type of the line-item marker for the object. margin Sets or retrieves the width of the top, right, bottom, and left margins of the object. marginBottom Sets or retrieves the height of the bottom margin of the object.

21

marginLeft Sets or retrieves the width of the left margin of the object. marginRight Sets or retrieves the width of the right margin of the object. marginTop Sets or retrieves the height of the top margin of the object. onOffBehavior Retrieves an object indicating whether the specified Microsoft® DirectAnimation® behavior is running. overflow Sets or retrieves how to manage the content of the object when the content exceeds the height or width of the object. overflowX Sets or retrieves how to manage the content of the object when the content exceeds the width of the object. overflowY Sets or retrieves how to manage the content of the object when the content exceeds the height of the object.

paddingSets or retrieves the amount of space to insert between the object and its margin or, if there is a border, between the object and its border.

paddingBottom Sets or retrieves the amount of space to insert between the bottom border of the object and the content. paddingLeft Sets or retrieves the amount of space to insert between the left border of the object and the content.paddingRight Sets or retrieves the amount of space to insert between the right border of the object and the content. paddingTop Sets or retrieves the amount of space to insert between the top border of the object and the content.pageBreakAfter Sets or retrieves whether a page break occurs after the object. pageBreakBefore Sets or retrieves a string indicating whether a page break occurs before the object. pixelBottom Sets or retrieves the bottom position of the object. pixelHeight Sets or retrieves the height of the object. pixelLeft Sets or retrieves the left position of the object. pixelRight Sets or retrieves the right position of the object. pixelTop Sets or retrieves the top position of the object. pixelWidth Sets or retrieves the width of the object. posBottom Sets or retrieves the bottom position of an object in the units specified by the bottom attribute. posHeight Sets or retrieves the height of an object in the units specified by the height attribute. position Sets or retrieves the type of positioning used for the object. posLeft Sets or retrieves the left position of an object in the units specified by the left attribute. posRight Sets or retrieves the right position of an object in the units specified by the right attribute. posTop Sets or retrieves the top position of an object in the units specified by the top attribute. posWidth Sets or retrieves the width of an object in the units specified by the width attribute. right Sets or retrieves the position of the object relative to the right edge of the next positioned object in the document hierarchy. rubyAlign Sets or retrieves the position of the ruby text specified by the RT object. rubyOverhang Sets or retrieves the position of the ruby text specified by the RT object. rubyPosition Sets or retrieves the position of the ruby text specified by the RT object. scrollbar3dLightColor Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. scrollbarArrowColor Sets or retrieves the color of the arrow elements of a scroll arrow. scrollbarBaseColor Sets or retrieves the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.

22

scrollbarDarkShadowColor Sets or retrieves the color of the gutter of a scroll bar. scrollbarFaceColor Sets or retrieves the color of the scroll box and scroll arrows of a scroll bar. scrollbarHighlightColor Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. scrollbarShadowColor Sets or retrieves the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. scrollbarTrackColor Sets or retrieves the color of the track element of a scroll bar. styleFloat Sets or retrieves on which side of the object the text will flow. tableLayout Sets or retrieves a string that indicates whether the table layout is fixed. textAlign Sets or retrieves whether the text in the object is left-aligned, right-aligned, centered, or justified. textAlignLast Sets or retrieves how to align the last line or only line of text in the object. textAutospace Sets or retrieves the autospacing and narrow space width adjustment of text. textDecoration Sets or retrieves whether the text in the object has blink, line-through, overline, or underline decorations. textDecorationBlink Sets or retrieves a Boolean value that indicates whether the object's textDecoration property has a value of "blink." textDecorationLineThrough Sets or retrieves a Boolean value indicating whether the text in the object has a line drawn through it. textDecorationNone Sets or retrieves the Boolean value indicating whether the textDecoration property for the object has been set to none. textDecorationOverline Sets or retrieves a Boolean value indicating whether the text in the object has a line drawn over it. textDecorationUnderline Sets or retrieves whether the text in the object is underlined. textIndent Sets or retrieves the indentation of the text in the object. textJustify Sets or retrieves the type of alignment used to justify text in the object. textKashidaSpace Sets or retrieves the ratio of kashida expansion to white space expansion when justifying lines of text in the object. textTransform Sets or retrieves the rendering of the text in the object. textUnderlinePosition Sets or retrieves the position of the underline decoration that is set through the textDecoration property of an object. top Sets or retrieves the position of the object relative to the top of the next positioned object in the document hierarchy. unicodeBidi Sets or retrieves the level of embedding with respect to the bidirectional algorithm. verticalAlign Sets or retrieves the vertical alignment of the object. visibility Sets or retrieves whether the content of the object is displayed. whiteSpace Sets or retrieves whether lines are automatically broken inside the object. width Sets or retrieves the width of the object. wordBreak Sets or retrieves line-breaking behavior within words, particularly where multiple languages appear in the object. wordSpacing Sets or retrieves the amount of additional space between words in the object. wordWrap Sets or retrieves whether to break words when the content exceeds the boundaries of its container. writingMode Sets or retrieves the direction and flow of the content in the object. zIndex Sets or retrieves the stacking order of positioned objects. zoom Sets or retrieves the magnification scale of the object.

Documents

1 Plan: Le calque version MIE et Netscape 6 Ecriture dynamique des calques Ecriture dynamique d'un tableau L'objet style du calque version MIE et Netscape