setting the float value from Javascript

问题

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

var closebutton = document.createElement('div');
closebutton.style.styleFloat = "right";
alert(closebutton.style.styleFloat);
closebutton.style.background = "#f00";
closebutton.innerHTML = '<a href="">&#10006;</a>';
titlebar.appendChild(closebutton);

The background of the element is indeed red, and when loaded the page alerts "right". Yet the div is not floated right. Firebug shows no trace of the float. There are no errors or warnings in the Error Console.

I'm stumped!

Update:
As suggested, I have also tried:

closebutton.style.float = 'right';

This also does not work, and is highlighted bright red in my text-editor (gedit)

回答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).

回答2:

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

Reference: W3C Style Object Reference

来源：https://stackoverflow.com/questions/3443379/setting-the-float-value-from-javascript

标签

javascript

html

css

css-float