Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Actualités

  • Blog de Cyril DURAND, passionné de JavaScript, Ajax, ASP.net et tout ce qui touche au developpement Web Client-Side.

    View Cyril Durand's profile on LinkedIn

    hit counters

class, float, background-color : comment les définir via du JS

Lorsque l'on fait du JavaScript et que l'on manipule le DOM on est sans arrêt en train de modifier la valeur de certaines propriétés de l'élément.

Par exemple pour modifier la taille d'un élément on fait :

var elmt = $get('elmt'); elmt.style.width = '200px';

La propriété style d'un élément DOM nous permet de modifier toutes les propriétés CSS. Mais comment faire pour définir la propriété CSS background-color ? Il est évident que elmt.style.background-color = '200px'; ne fonctionnera pas à cause du tiret. Il faut alors passer par la propriété elmt.style.backgroundColor. La règle est simple, pour toutes les propriétés CSS qui comportent un tirer, on le supprime et on met la lettre qui suit le tiret en majuscule.

Il existe aussi certaines propriétés dont le nom est un mot réservé du langage JavaScript. Il faudra passer par className plutot que class lorsque vous essayez de modifier la classe CSS d'un élément, float est aussi un mot clé de JS, si vous voulez le modifier dynamiquement il vous faudra utiliser la propriété styleFloat pour IE et cssFloat pour les autres.

var elmt = $get('elmt'); elmt.style.width = '200px'; elmt.style.backgroundColor = '#FF00FF'; elmt.className = 'toto'; elmt.style.cssFloat = 'right'; elmt.style.styleFloat = 'right';

Enfin, un petit conseil, généralement on définit plusieurs propriétés de style en même temps, n'hésitez alors surtout pas à utiliser le mot clé with, qui permet de ne pas répéter le "elmt.style" (comme en VB) en plus on obtient un petit gain de performance.

var elmt = $get('elmt'); elmt.className = 'toto'; with(elmt.style) width = '200px'; backgroundColor = '#FF00FF'; cssFloat = 'right'; styleFloat = 'right'; }

Voici la liste des propriétés de style DOM du W3C et de la MSDN car malheureusement il y a des différences ... pour l'instant pour je n'ai rencontré que le cas de cssFloat styleFloat.

Posted: samedi 9 juin 2007 16:44 par cyril
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

FREMYCOMPANY a dit :

la différence est aussi très marquée quand il s'agit de manipuler les fichiers CSS (ou tout simplement les jeux de style de la page)

IE fonctionne de façon radicalement opposée au reste des navigateurs, même si Opera et FireFox connaitrons aussi quelques différents, notemment dans l'interpretation des selecteurs.

A noter aussi le set/removeExpression d'IE qui lui est totalement propre (et peut parfois se révéler bien utile), le contentEditable ou encore document.selection (voir http://www.javascriptfr.com/codes/DOCUMENT-SELECTION-POUR-FF-FIREFOX_42090.aspx).

# juin 9, 2007 19:36
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- WPF : la gestion des dates (Label, TextBlock) par Pierrick's Blog le il y a 4 heures et 58 minutes

- [ASP.NET] - ASP.NET Generated Image par Aurelien's Blog - When ClientSide meets .Net le il y a 6 heures et 26 minutes

- Utiliser le SDK Open XML pour manipuler vos documents Office Open XML par Julien Chable le il y a 7 heures et 40 minutes

- [Silverlight] - Créer un contrôle réutilisable et des propriétés personnalisées. par Danuz le il y a 10 heures et 57 minutes

- Photosynth : Composez et partagez vos scènes ! par Blog technique de Nicolas Boonaert le il y a 11 heures et 0 minutes

- Comment débugger un programme de génération de code utilisé dans VS ? par Matthieu MEZIL le il y a 11 heures et 1 minutes

- Avoir une propriété sur l'object context qui renvoit les sous-entités par Matthieu MEZIL le il y a 11 heures et 13 minutes

- Sortie du SDK 1.1 de Visual Studio 2008 par Michel Perfetti [Miiitch] le il y a 13 heures et 47 minutes

- Skyfire, Silverlight sur votre mobile ! par alex# le il y a 14 heures et 4 minutes

- VSTSDB 2008 GDR CTP16 est arrivé par Noham Choulant le il y a 15 heures et 8 minutes