{"id":332,"date":"2008-10-28T07:32:52","date_gmt":"2008-10-28T06:32:52","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=332"},"modified":"2008-10-28T07:32:52","modified_gmt":"2008-10-28T06:32:52","slug":"css-float-et-javascript","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/css-float-et-javascript\/","title":{"rendered":"Assigner ou r\u00e9cup\u00e9rer la valeur de l’attribut CSS float via Javascript"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Comment manipuler la propri\u00e9t\u00e9 CSS float<\/code> via javascript<\/em>. La r\u00e9ponse qui vient directement \u00e0 l’esprit est de dire qu’il suffit d’\u00e9crire :<\/p>\n

var el = document.getElementById('element_id'); el.style.float = 'left';<\/pre>\n
Si cela \u00e9tait aussi simple, ce poste ne servirait \u00e0 rien \ud83d\ude09 . En effet le code ci-dessus ne fonctionne pas pour la simple et bonne raison qu’en javascript<\/em> comme dans la plupart des langages de programmation le mot float<\/code> est un mot r\u00e9serv\u00e9. En effet, float<\/code> d\u00e9signe un nombre d\u00e9cimal. Alors comment faire ? <\/p>\n
Un peu d’histoire pour commencer. L’\u00e9laboration de la classe style <\/em>en DOM pour r\u00e9cup\u00e9rer et assigner les valeurs des feuilles de style est un apport de Microsoft<\/em>. Et lorsque les d\u00e9veloppeurs de M$<\/em> ce sont retrouv\u00e9s confront\u00e9s \u00e0 ce probl\u00e8me, ils l’ont r\u00e9solu en cr\u00e9ant la m\u00e9thode sp\u00e9cifique styleFloat<\/code>. Ainsi, historiquement pour assigner et\/ou r\u00e9cup\u00e9rer la propri\u00e9t\u00e9 float<\/code> d’un \u00e9l\u00e9ment il fallait \u00e9crire, dans le premier navigateur \u00e0 permettre une telle assignation, le code suivant :<\/p>\n
var el = document.getElementById('element_id'); el.style.styleFloat = 'left';<\/pre>\n
Mais voila, entre temps, le W3C a r\u00e9cup\u00e9r\u00e9\u00a0et a\u00a0reformul\u00e9 la classe style<\/code> et, apr\u00e8s moultes d\u00e9bats, il fut d\u00e9cid\u00e9 d’utiliser la m\u00e9thode cssFloat<\/code>. Donc selon le W3C il faut \u00e9crire ce qui suit :<\/p>\n
var el = document.getElementById('element_id'); el.style.cssFloat = 'left';<\/pre>\n
Bon je vois d\u00e9j\u00e0, certains d’entre vous critiquer encore une fois Microsoft, mais pour une fois, je vais prendre leur d\u00e9fense. Ils ont cr\u00e9\u00e9 et implant\u00e9 la classe style<\/code> avant les recommandations du W3C et donc ils ont fait ce qu’ils ont jug\u00e9 \u00eatre correct \u00e0 l’\u00e9poque, et d’ailleurs d’autres navigateurs ont suivi et ont implant\u00e9 la m\u00e9thode styleFloat<\/code> .<\/p>\n
En r\u00e9sum\u00e9,\u00a0\u00e0 l’heure actuelle, il existe 3 types de navigateurs:<\/p>\n