setting the float value from Javascript

Question

I\'m having trouble setting something to float right in JS. My code is as follows:

var closebutton = document.createElement(\'div\');
closebutton.style.style         


        

Answer 1

The standard way to set the float style in JavaScript is to use the cssFloat property:

closebutton.style.cssFloat = 'right';

That works in all browsers, but not in IE, which expects the styleFloat property instead. Therefore you can either detect the browser, and apply the appropriate property, or else set them both:

closebutton.style.styleFloat = 'right';
closebutton.style.cssFloat = 'right';

Note that float is a reserved word in JavaScript, and cannot be used in the dot notation. The same applies for class, for example, which is another reserved word. That's why there is a different name for CSS properties that conflict with JavaScript reserved words (Source).

Further reading:

• Mozilla Dev Center: float CSS Proeprty

Answer 2

Instead of closebutton.style.float, use closebutton.style.cssFloat

Reference: W3C Style Object Reference