L'Altruiste : Le Javascript

Style représente les paramètres courants de tous les styles en ligne possible pour un objet donné.

Compatibilité

Disponibilité

Javascript 1.2

Correspondance HTML

<balise style="...">
<balise class="...">
<balise id="...">

Synopsis

document.classes.NomClasse.NomBalise
document.contextual(...)
document.ids.NomElement
document.tags.NomBalise
htmlElement.style //IE

Propriétés

Propriété	Description
align	aligne l'élément HTML dans son élément parent align.
background	spécifie l'ensemble des styles d'arrière plan d'un élément.
backgroundAttachment	indique si l'image de fond doit être fixe.
backgroundColor	applique une couleur de fond à un élément.
backgroundImage	applique une image en rrière plan à un élément.
backgroundPosition	spécifie le position de l'image de fond.
backgroundPositionX	spécifie le position horizontale de l'image de fond.
backgroundPositionY	spécifie le position verticale de l'image de fond.
backgroundRepeat	spécifie le type de répétitions d'une image.
border	spécifie l'ensemble des styles de bordure.
borderBottom	applique un style à la bordure inférieure.
borderBottomColor	applique une couleur à la bordure inférieure.
borderBottomStyle	applique un style de cadre à la bordure inférieure.
borderBottomWidth	donne la largeur de la bordure inférieure.
borderColor	applique une couleur à la bordure.
borderLeft	applique un style à la bordure gauche.
borderLeftColor	applique une couleur à la bordure gauche.
borderLeftStyle	applique un style de cadre à la bordure gauche.
borderLeftWidth	donne la largeur de la bordure gauche.
borderRight	applique un style à la bordure droite.
borderRightColor	applique une couleur à la bordure droite.
borderRightStyle	applique un style de cadre à la bordure droite.
borderRightWidth	donne la largeur de la bordure droite.
borderStyle	spécifie le style de bordure.
borderTop	applique un style à la bordure supérieure.
borderTopColor	applique une couleur à la bordure supérieure.
borderTopStyle	applique un style de cadre à la bordure supérieure.
borderTopWidth	donne la largeur de la bordure supérieure.
borderWidth	applique une largeur aux bordures.
clear	spécifie si les côtés d'un élément HTML sont flottants.
clip	spécifie une zone de visibilité de l'élément.
color	applique une couleur au texte de l'élément.
cssText	.
cursor	indique le type de curseur de souris.
display	spécifie le type d'affichage de l'élément.
filter	spoécifie un filtre à appliquer à un élément.
font	spécifie l'ensemble des styles de police.
fontFamily	applique un famille de police au texte.
fontSize	spécifie une taille de police.
fontStyle	spécifie un style de police.
fontVariant	détermine une police à afficher en petites majuscules.
fontWeight	spécifie le type de caractère d'une police.
height	spécifie la hauteur de l'élément.
left	spécifie la position gauche de l'élément par rapport au bord du document.
letterSpacing	indique l'espace entre les lettres.
lineHeight	spécifie la hauteur de ligne.
listStyle	spécifie le style de la liste.
listStyleImage	spécifie une image comme puce.
listStylePosition	spécifie la position de la liste.
listStyleType	spécifie le style de puces affichées dans une liste d'items.
margin	spécifie la taille de toutes les marges.
marginBottom	spécifie une marge inférieure.
marginLeft	spécifie une marge gauche.
marginRight	spécifie une marge droite.
marginTop	spécifie une marge supérieure.
overflow	détermine le comportement de l'élément lorsqu'il dépasse le cadre d'affichage.
paddingBottom	spécifie une espace de remplissage inférieur.
paddingLeft	spécifie une espace de remplissage gauche.
paddingRight	spécifie une espace de remplissage droit.
paddingTop	spécifie une espace de remplissage supérieur.
pageBreakAfter	indique où placer une fin de page et à quelle page (gauche ou droite) le contenu ultérieur devrait reprendre.
pageBreakBefore	indique où placer une fin de page et à quelle page (gauche ou droite) le contenu ultérieur devrait reprendre.
pixelHeight	spécifie la hauteur de l'élément en pixels.
pixelLeft	spécifie la position gauche de l'élément en pixels.
pixelTop	spécifie la position supérieur de l'élément en pixels.
pixelWidth	spécifie la largeur de l'élément en pixels.
posHeight	spécifie la hauteur de l'élément dans l'unité spécifié.
position	retrouve le type de positionnement utilisé pour l'élément.
posLeft	spécifie le positionnement horizontal pour l'élément.
posTop	spécifie le positionnement vertical pour l'élément.
posWidth	spécifie la largeur de l'élément dans l'unité spécifié.
styleFloat	place ou préserve l'attribut CSS de flottement, qui indique si l'élément flotte, faisant glisser le texte autour de lui.
textAlign	permet d'aligner un texte.
textDecoration	indique le type de décoration d'un texte.
textDecorationBlink	spécifie un clignotement du texte.
textDecorationLineThrough	spécifie un texte barré.
textDecorationNone	indique qu'aucune décoration ne s'applique à l'élément.
textDecorationOverline	spécifie un texte surligné.
textDecorationUnderline	spécifie un texte souligné.
textIndent	spécifie la longueur de l'indentation d'un texte.
textTransform	spécifie la casse d'un texte.
whiteSpace	spécifie si les espaces blancs à l'intérieur d'un élément HTML doivent permettre de passer à la ligne.
top	spécifie la position supérieure de l'élément par rapport au bord du document.
verticalAlign	spécifie l'alignement vertical d'un élément HTML.
visibility	indique la visibilité de l'élément.
width	spécifie la largeur.
zIndex	spécifie la position de l'élément dans la pile.

Méthodes

Méthode	Description
borderWidths(haut, droit, bas, gauche)	spécifie la largeur des bordures d'un élément HTML.
margins(haut, droit, bas, gauche)	spécifie les marges entre l'élément HTML et le reste des éléments adjacents.
paddings(haut, droit, bas, gauche)	définit les espaces de remplissages entre un élément HTML et son contenu.

Exemple [voir]

<html>
  <head>
    <style>
      .photo {position:relative}
    </style>
    <script language="JavaScript1.2">
      var degre = 5;
      var arret = 0;
      var etape = 1;

      function init(image)
      {
        arret = 0;
        tremblement = image;
        tremblement.style.left = 0;
        tremblement.style.top = 0;
      }

      function agitation()
      {
        if ((!document.all && !document.getElementById) || arret == 1)
          return;
        if (etape == 1)
        {
          tremblement.style.top = parseInt(tremblement.style.top) + degre;
        }
        else if (etape == 2)
        {
          tremblement.style.left = parseInt(tremblement.style.left) + degre;
        }
        else if (etape == 3)
        {
          tremblement.style.top = parseInt(tremblement.style.top) - degre;
        }
        else
        {
          tremblement.style.left = parseInt(tremblement.style.left) - degre;
        }
        if (etape < 4)
          etape++;
        else
          etape = 1;
        setTimeout("agitation()", 30)
      }

      function stabilisation(image)
      {
        arret = 1;
        image.style.left = 0;
        image.style.top = 0;
      }
    </script>
  </head>
  <body>
    <img src="images/informatique.jpg" 
           border="0" width="200" height="133" 
           class="photo" 
           onMouseover="init(this);agitation()"
           onMouseout="stabilisation(this)">
  </body>
</html>

En savoir plus :