SELFHTML/Quickbar  JavaScript  Référence objet

style
Cette page est un document avec du texte et des informations

  style: généralités sur l'utilisation
  Propriétés des feuilles de style

Méthodes:

  getAttribute() (rechercher une mention de feuilles de style)
  removeAttribute() (retirer une mention de feuilles de style)
  setAttribute() (insérer une mention de feuilles de style)

 

style: généralités sur l'utilisation

Avec l'objet style, qui se trouve sous l'objet  all dans la hiérarchie JavaScript, vous avez accès aux  mentions de feuilles de style définies pour un élément HTML. Vous pouvez lire toutes les mentions de feuilles de style et les modifier de façon dynamique. Ainsi, vous pouvez modifier à loisir des éléments HTML à l'aide de scripts.

L'accès aux éléments HTML se déroule exactement comme pour l'objet all (à ce sujet, lisez sur l'objet all avant tout les passages  adresser des éléments HTML et  adresser des éléments HTML avec leur nom). Pour l'objet style est simplement noté en plus style suivi de la mention de feuille de style désirée.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function jaune()
{
 document.all.DynText.style.backgroundColor = "yellow";
 document.all.DynText.style.fontSize = "24pt";
 document.all.DynText.style.padding = "5mm";
}
</script>
</head><body>
<p id="DynText">Ceci est le texte</p>
<a href="javascript:jaune()">jaune</a>
</body></html>

Explication:

L'exemple contient un paragraphe de texte avec le nom id DynText. En cliquant sur le lien placé au dessous, la fonction jaune() est appelée. Cette fonction attribue au paragraphe de texte différentes mentions de feuilles de style, par exemple la mention pour la couleur d'arrière plan (backgroundColor) en lui affectant la couleur jaune (yellow). Le paragraphe reçoit ainsi de façon dynamique lorsqu'on clique sur le lien une couleur d'arrière plan jaune, ainsi que les autres attributs.

Il importe peu que l'élément HTML concerné contienne déjà des mentions de feuilles de style auparavant ou non. Dans l'exemple il n'en contient aucun.

D'après le même schéma, vous pouvez traiter toutes les mentions de feuilles de style que connaît l'Explorer Internet MS. Le tableau propriétés de feuilles de style dresse la liste de ces mentions de feuilles de style. Veillez cependant aux remarques sur la syntaxe particulière des mentions de feuilles de style en JavaScript.

Attention:

Vous devez connaître cette règles importante: Si dans un script une mention de feuille de style doit être lue ou modifiée, le trait d'union devient superflu et la première lettre du mot suivant habituellement le trait d'union doit être en majuscules. Ainsi la mention de feuilles de style background-color s'écrit dans un Script backgroundColor.

 

MS JScriptMS IE4.0 Propriétés de feuilles de style

Le tableau suivant dresse la liste des propriétés de feuilles de style que connaît l'Explorer Internet MS 4.0. Le tableau contient à gauche la mention de feuilles de style comme vous devez la noter en JavaScript dans le contexte de l'objet style. Dans la colonne du milieu se trouve une courte description de l'usage de la mention. À droite se trouve un lien "Description CSS". Ces liens mènent à la description de la mention de feuilles de style concernée dans le chapitre traitant des  feuilles de style CSS. Vous devez suivre ces liens si vous voulez savoir quelles valeurs peut avoir la mention de feuilles de style correspondante.

mention JavaScript court descriptif Description CSS
background image d'arrière plan  Description CSS
backgroundAttachment effet filigrane  Description CSS
backgroundColor couleur d'arrière plan  Description CSS
backgroundImage image d'arrière plan  Description CSS
backgroundPosition Position de l'image d'arrière plan  Description CSS
backgroundRepeat effet papier peint  Description CSS
border cadre  Description CSS
borderBottom cadre en bas  Description CSS
borderBottomColor couleur du cadre en bas  Description CSS (border-color)
borderBottomStyle style du cadre en bas  Description CSS (border-style)
borderBottomWidth épaisseur du cadre en bas  Description CSS
borderColor couleur du cadre  Description CSS
borderLeft cadre à gauche  Description CSS
borderLeftColor couleur du cadre à gauche  Description CSS (border-color)
borderLeftStyle style du cadre à gauche  Description CSS (border-style)
borderLeftWidth épaisseur du cadre à gauche  Description CSS
borderRight cadre à droite  Description CSS
borderRightColor couleur du cadre à droite  Description CSS (border-color)
borderRightStyle style du cadre à droite  Description CSS (border-style)
borderRightWidth épaisseur du cadre à droite  Description CSS
borderStyle style du cadre  Description CSS
borderTop  cadre en haut  Description CSS
borderTopColor couleur du cadre en haut  Description CSS (border-color)
borderTopStyle style du cadre en haut  Description CSS (border-style)
borderTopWidth épaisseur du cadre en haut  Description CSS
borderWidth épaisseur du cadre  Description CSS
clear suite pour le cours du texte  Description CSS
clip limiter le domaine d'affichage  Description CSS
color couleur du texte  Description CSS
cursor pointeur de souris  Description CSS
display non-affichage (sans prendre de place)  Description CSS
font police  Description CSS
fontFamily famille de police  Description CSS
fontSize taille de police  Description CSS
fontStyle style de police  Description CSS
fontVariant variante de police  Description CSS
fontWeight poids de police  Description CSS
height hauteur d'un élément  Description CSS
left position à partir de la gauche  Description CSS
letterSpacing espace des signes  Description CSS
lineHeight hauteur de ligne  Description CSS
listStyle représentation de listes  Description CSS
listStyleImage graphismes de puces personnalisés  Description CSS
listStylePosition retrait de listes  Description CSS
listStyleType type de représentation de listes  Description CSS
margin espace/marge  Description CSS
marginBottom espace/marge en bas  Description CSS
marginLeft espace/marge à gauche  Description CSS
marginRight espace/marge à droite  Description CSS
marginTop espace/marge en haut  Description CSS
overflow contenu trop important  Description CSS
padding espace intérieur  Description CSS
paddingBottom espace intérieur en bas  Description CSS
paddingLeft espace intérieur à gauche  Description CSS
paddingRight espace intérieur à droite  Description CSS
paddingTop espace intérieur en haut  Description CSS
pageBreakAfter saut de page après  Description CSS
pageBreakBefore saut de page avant  Description CSS
position mode de positionnement  Description CSS
textAlign alignement  Description CSS
textDecoration décoration du texte  Description CSS
textIndent retrait du texte  Description CSS
textTransform transformation du texte  Description CSS
top position à partir du haut  Description CSS
verticalAlign alignement vertical  Description CSS
visibility non affichage avec réservation de place  Description CSS
width largeur d'un élément  Description CSS
zIndex position de la couche en cas de superposition  Description CSS

 
 

MS JScriptMS IE 4.0 getAttribute()

Recherche si un élément HTML contient une mention de feuilles de style déterminée et de quelle valeur. Retourne la valeur qu'a la mention de feuilles de style au cas où elle est trouvée, sinon une chaîne de caractères vide "". Attend les paramètres suivants:
1. mention de style = mention de feuilles de style recherchée.
2. majuscules/minuscules = indiquer true quand il faut différencier la casse pour la mention de feuilles de style ou false, si la distinction ne doit pas être faite.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function Test()
{
  x = document.all.paragraphe.style.getAttribute("fontSize","false");
  alert(x);
}
</script>
</head><body">
<p id="paragraphe" style="font-size:18pt">un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>

Explication:

L'exemple contient un paragraphe avec le nom id paragraphe et un lien qui si on le clique appelle la fonction Test(). Cette fonction recherche avec getAttribute(), si l'élément portant le nom paragraphe contient une mention de feuilles de style font-size (syntaxe CSS) ou fontSize (syntaxe JavaScript). Étant donné que c'est le cas, la valeur qui lui est affectée (18pt) est recherchée et affichée dans une boite de dialogue.

 

MS JScriptMS IE 4.0 removeAttribute()

Retire un attribut déterminé d'une mention de feuilles de style. Attend les paramètres suivants:
1. Attribut = la mention de feuilles de style désirée dans le repère HTML.
2. majuscules/minuscules = indiquer true quand il faut différencier la casse pour la mention de feuilles de style ou false, si la distinction ne doit pas être faite.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function Test()
{
 document.all.paragraphe.style.removeAttribute("color","false");
}
</script>
</head><body">
<p id="paragraphe" style="color:red">un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>

Explication:

L'exemple contient un paragraphe avec le nom id paragraphe et un lien qui si on le clique appelle la fonction Test(). Cette fonction retire du paragraphe la mention de feuilles de style color, de telle sorte que le paragraphe perde sa couleur rouge et reçoive la couleur standard pour le texte.

 

MS JScriptMS IE 4.0 setAttribute()

Ajoute dans un repère HTML déterminé une mention de feuilles de style déterminée. Attend les paramètres suivants:
1. mention de style = mention de feuilles de style désirée.
2. valeur = valeur à affecter à la mention de feuilles de style.
3. majuscules/minuscules = indiquer true quand il faut différencier la casse pour la mention de feuilles de style ou false, si la distinction ne doit pas être faite.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function Test()
{
document.all.paragraphe.style.setAttribute("border","thin solid red","false");
}
</script>
</head><body">
<p id="paragraphe">un texte</p>
<a href="javascript:Test()">Test</a>
</body></html>

Explication:

L'exemple contient un paragraphe avec le nom id paragraphe et un lien qui si on le clique appelle la fonction Test(). Cette fonction ajoute dans le paragraphe la mention de feuilles de style border à, savoir avec la valeur thin solid red. Ainsi le paragraphe est entouré d'un fin cadre rouge.

après: anchors
avant: all
 

SELFHTML/Quickbar  JavaScript  Référence objet

© 1998 Stefan Münz / © 2001 Traduction  Serge François, 13405@free.fr