Comment manipuler la propriété CSS float via javascript. La réponse qui vient directement à l’esprit est de dire qu’il suffit d’écrire :

var el = document.getElementById('element_id'); el.style.float = 'left';

Si cela était aussi simple, ce poste ne servirait à rien 😉 . En effet le code ci-dessus ne fonctionne pas pour la simple et bonne raison qu’en javascript comme dans la plupart des langages de programmation le mot float est un mot réservé. En effet, float désigne un nombre décimal. Alors comment faire ?

Un peu d’histoire pour commencer. L’élaboration de la classe style en DOM pour récupérer et assigner les valeurs des feuilles de style est un apport de Microsoft. Et lorsque les développeurs de M$ ce sont retrouvés confrontés à ce problème, ils l’ont résolu en créant la méthode spécifique styleFloat. Ainsi, historiquement pour assigner et/ou récupérer la propriété float d’un élément il fallait écrire, dans le premier navigateur à permettre une telle assignation, le code suivant :

var el = document.getElementById('element_id'); el.style.styleFloat = 'left';

Mais voila, entre temps, le W3C a récupéré et a reformulé la classe style et, après moultes débats, il fut décidé d’utiliser la méthode cssFloat. Donc selon le W3C il faut écrire ce qui suit :

var el = document.getElementById('element_id'); el.style.cssFloat = 'left';

Bon je vois déjà, certains d’entre vous critiquer encore une fois Microsoft, mais pour une fois, je vais prendre leur défense. Ils ont créé et implanté la classe style avant les recommandations du W3C et donc ils ont fait ce qu’ils ont jugé être correct à l’époque, et d’ailleurs d’autres navigateurs ont suivi et ont implanté la méthode styleFloat .

En résumé, à l’heure actuelle, il existe 3 types de navigateurs:

• Ce qui ne connaissent que la méthode styleFloat, comme Internet Explorer jusqu’à la version 7 (je n’ai pas testé Internet Explorer 8). 
• Ce qui ne reconnaissent que la méthode cssFloat , comme Safari ou encore Firefox,
•  Et enfin, ceux qui comprennent les 2 méthodes, Opera est dans cette dernière catégorie. 

Dans de telles conditions, on serait tenté d’utiliser les user agent des navigateurs pour déterminer quand utiliser l’une ou l’autre de ces méthodes, mais cet option est mal!! Au lieu de cela, le plus simple et le plus efficace est encore d’écrire les codes suivants :

var el = document.getElementById('element_id');  //assignation

el.style.styleFloat = 'left';

el.style.cssFloat = 'left';  //récupération

var elFloat = (typeof el.style.cssFloat === 'string') ? el.style.cssFloat : el.style.styleFloat;

En résumé, lors de l’assignation, on utilise les 2 méthodes, même si cela ajoute la méthode manquante à l’élément sélectionné, cela n’engendrera aucune erreur DOM et/ou javascript. Lors de la récupération de la valeur de float il suffira de vérifier si la méthode cssFloat est présente si oui on récupère sa valeur, sinon on récupère la valeur de styleFloat.