Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

Atteint de JavaScriptite Aiguë [Cyril Durand]

Expert ASP.net Ajax et WCF, Cyril Durand parle dans son blog de point techniques sur ASP.net, ASP.net Ajax, JavaScript, WCF et .net en général. Cyril est également consultant indépendant, n'hésitez pas à le contacter pour de l'assistance sur vos projets

Actualités

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

    N'hésitez pas à me contacter pour vos projets .net : architecture, accompagnement, formation, ...

    View Cyril Durand's profile on LinkedIn
    hit counters


    Expertise Commerce server et BizTalk

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

- Microsoft Regional Director 2.0 ! par Le blog de Patrick [MVP Office 365] le 02-23-2015, 22:10

- TechDays Paris 2015: Malware unchained par Blog Technique de Romelard Fabrice le 02-12-2015, 22:58

- TechDays Paris 2015: La transformation du SI avec le Cloud Microsoft, quel sera le rôle de la DSI demain, comment le Cloud MS accompagne cette transfo... par Blog Technique de Romelard Fabrice le 02-12-2015, 22:51

- TechDays Paris 2015: L’intranet social avec Office 365 et Yammer - quelles possibilités d’intégration ? par Blog Technique de Romelard Fabrice le 02-12-2015, 22:46

- TechDays Paris 2015: Plenière jour 3 - Vers une technologie invisible et une intelligence omniprésente ? par Blog Technique de Romelard Fabrice le 02-12-2015, 10:59

- TechDays Paris 2015: Geek is in da {new} House par Blog Technique de Romelard Fabrice le 02-12-2015, 01:13

- TechDays Paris 2015: Windows Server vNext - Virtualisation et Stockage par Blog Technique de Romelard Fabrice le 02-12-2015, 00:26

- TechDays Paris 2015: Quoi de neuf dans Windows 10 ? par Blog Technique de Romelard Fabrice le 02-11-2015, 23:37

- TechDays Paris 2015: Réussir sa migration vers Office 365 en formant les uilisateurs par Blog Technique de Romelard Fabrice le 02-11-2015, 14:32

- TechDays Paris 2015: Windows 10 et PowerShell 5.0 par Blog Technique de Romelard Fabrice le 02-11-2015, 13:10