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

• z-index => element.style.zIndex
• background-color => element.style.backgroundColor

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.

function afficher(obj){
	document.getElementById(obj).style.display = "block";
}
 
function cacher(obj){
	document.getElementById(obj).style.display = "none";
}

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 :

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:

elementCptedStyle = element.currentStyle || window.getComputedStyle(element, null);

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

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

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 :

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";
	}
}

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 :

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 :

element.style.getPropertyValue(prop);
// où element est l'élément HTML
// et prop est le style recherché