Soutenez-nous

FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 19 décembre 2013 

 
OuvrirSommaireLes feuilles de style

On remplace les "-" par une majuscule sur le mot suivant.
Exemples :

  • z-index => element.style.zIndex
  • background-color => element.style.backgroundColor
Créé le 3 janvier 2006  par siddh

Lien : Voir les correspondances ci-dessous.

On a quelquefois besoin de faire apparaître ou masquer certains objets. Comme par exemple pour des info-bulles, des menus, …
Voici deux fonctions qui permettent de faire apparaître ou disparaître un objet passé en paramètre.

 
Sélectionnez
function afficher(obj){
	document.getElementById(obj).style.display = "block";
}
 
function cacher(obj){
	document.getElementById(obj).style.display = "none";
}
Mis à jour le 16 décembre 2005  par simone.51, denisC

On peut accéder au style réel (celui qui prend en compte toutes les règles des container et des class d'un élément) de la façon suivante :

 
Sélectionnez
element.currentStyle //IE
window.getComputedStyle(element, null) //FF et Opera

L'objet résultant de ces deux fonctions a les mêmes propriétés que l'attribut style d'un élément normal.
Pour un script cross-navigateurs:

 
Sélectionnez
elementCptedStyle = element.currentStyle || window.getComputedStyle(element, null);
Créé le 3 janvier 2006  par denisC

Voici la table de correspondance entre propriété CSS et propriété JavaScript de l'objet style correspondant :

Attribut CSS Propriété JavaScript
text-decoration textDecoration
text-indent textIndent
text-transform textTransform
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
line-height lineHeight
letter-spacing letterSpacing
vertical-align verticalAlign
z-index zIndex
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
float cssFloat

Les autres propriétés ont le même format en CSS et en JavaScript (border, font, margin, overflow, padding, position, …).

Créé le 31 octobre 2006  par BrYs

Il est parfois nécessaire de placer deux éléments HTML l'un à coté de l'autre. Or, pour des raisons esthétiques, on préfère souvent que ces éléments aient la même taille, définie en fonction du plus grand. Cela peut se faire facilement en JavaScript, comme le montre cette fonction :

 
Sélectionnez
window.onload=ajuste;
 
function ajuste(){
	var gauche=document.getElementById('div_gauche');
	var droite=document.getElementById('div_droite');
	if(gauche.offsetHeight>droite.offsetHeight){
		droite.style.height=gauche.offsetHeight+"px";
	}
	else{
		gauche.style.height=droite.offsetHeight+"px";
	}
}
Créé le 5 mars 2009  par trotters213

Lien : Exemple d'utilisation de ce script

La propriété style des objets HTML en JavaScript permet de récupérer ou d'assigner des styles pour des éléments.
Ca marche très bien pour récupérer les styles déclarés inline (via l'attribut HTML ou la propriété JavaScript style), car dans ces cas, la propriété est affectée à l'objet JavaScript correspondant.
Ce n'est pas le cas si le style est déclaré dans une feuille de style CSS (fichier externe ou balises <style>) voire s'il n'est pas défini. Dans ces cas, l'appel à la propriété JavaScript renverra une chaine vide.

Si vous souhaitez récupérer un style, qu'il ai été ou non déclaré, il faut passer par la fonction currentStyle pour IE et getComputedStyle pour les autres navigateurs :

 
Sélectionnez
function recup_style(){
   if(window.getComputedStyle){
      alert(window.getComputedStyle(document.body,null).fontSize);
   }
   else{
      alert(document.body.currentStyle.fontSize);
   }
}

Vous constaterez que currentStyle est une méthode de l'objet body alors que getComputedStyle() est une méthode de l'objet window, elle prend deux arguments :

  • l'élément HTML dont on veut récupérer le style ;
  • une pseudo-classe ou null.

Attention aux unités renvoyées. IE renvoit les unités déclarées ou des pt par défaut, FF renvoit systématiquement des valeurs en px !

Pour tout navigateur dépendant du runkit, lorsque l'élément n'est pas rattaché au document, il faut passer par la méthode getPropertyValue :

 
Sélectionnez
element.style.getPropertyValue(prop);
//  element est l'élément HTML
// et prop est le style recherché
Mis à jour le 18 avril 2012  par Bovino, SpaceFrog, Lcf.vs

Lien : Exemple d'utilisation de ce script

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.