javascript - left - how to make text float right in html




Is there a cross browser way of setting style.float in Javascript? (2)

Usually, if you need to set a style attribute in JavaScript, you say something like:

element.style.attribute = "value";

There are slight variations but usually the attribute name is a similar, albeit camelcased, version of the HTML attribute name.

The problem for me is that the float attribute doesn't work. Float is a keyword in JavaScript and so style.float makes all the JavaScript for the page break. I looked in MSDN, and it said to use styleFloat like so:

element.style.styleFloat = "value";

That only works in IE. Firefox, Safari, Chrome, Opera - none of them seem to have an answer. Where am I going wrong? There has to be a simple answer to this.


This is a function sniff approach:

if (typeof elmt.style.cssFloat != "undefined")
    elmt.style.cssFloat = "none";
else
    elmt.style.styleFloat = "none";

But usually we don't need to bother with this detection. I have tested user2719099's approach with Chrome as below:

        elmt.style.cssFloat = elmt.style.styleFloat = "none";
        console.log(elmt.style.cssFloat, elmt.style.styleFloat);

And the result is quite good in the console:

    none none

Use cssFloat as in...

element.style.cssFloat = "value";

That works in everything except IE 8 and older, but you can always detect the browser and switch, or just set them both. Unfortuantely, there is no way to set just one style value to work in all browsers.

So to summarize, everyone you need to set the float, just say:

element.style.styleFloat = "value";
element.style.cssFloat = "value";

That should work everywhere.





javascript