Use JavaScript to change “float” style

By Seree On November 8, 2007 · 13 Comments · In Application Development

Hey friends,

In a few days ago, I’ve just stuck with how to change “float” style in JavaScript and very confuse why it doesn’t work at all!

I’m using …

var obj = document.getElementById(“some1”);

obj.style.float = “left”;

No luck at all. I tried both on Internet Explorer and Firefox. Even I use Internet Explorer Toolbar and Firebug. I can change the style via that tools but no luck with JavaScript.

Silly?

I’m fool with DOM. I try to find a solution and suddenly found that.

In DOM, there are no “float” property but “cssFloat”.

Just change my code to …

var obj = document.getElementById(“some1”);

obj.style.cssFloat = “left”;

Really silly huh?

Facebook comments:

13 Responses to Use JavaScript to change “float” style

erwinke says:

November 7, 2008 at 9:41 pm

Under IE6 you must use this:

obj.style.styleFloat=’left’;
Henrik says:

November 27, 2008 at 12:09 am

Ohh thx!
i figured that it needed something in front, since float really is a datatype, so using it in obj.style.float would be impossible.
Me says:

March 21, 2009 at 10:00 am

Bless you for posting this! I was tearing my hair out trying to figure out why my float code worked in FF but not IE!! And styleFloat works like a dream.
Nathan says:

November 26, 2009 at 11:52 pm

Thanks man, very helpful! Much appreciated
Boss Hawk says:

December 31, 2009 at 12:36 am

Here is a little workaround for this problem:

obj.setAttribute(“style”, obj.getAttribute(“style”) + “; float:left; “);

The leading semicolon must be set because the IE sometimes changes the styles and always misses out the last semicolon.
Eino says:

February 19, 2010 at 4:44 pm

float is a reserved word in about every programming language, so it’s not silly.
Bobby says:

February 26, 2010 at 2:39 pm

Thanks a lot.. very help ful to me..
Leon says:

March 14, 2010 at 4:04 am

So that makes him plain stupid.
Penuel says:

April 14, 2011 at 4:34 pm

Thanks for posting this!
Black_Diamond says:

April 30, 2011 at 3:26 pm

thanks a lot buddy..very helpful..Its the first time I am finding an answer in a forum..Using your information i created the following script which is is working in all browsers…Have a look

function float1(){
var aa = document.getElementById(‘yourdiv1′);
var bb = document.getElementById(‘yourdiv2′);
aa.style.cssFloat= ‘right’;
aa.style.styleFloat= ‘right’;
bb.style.cssFloat = ‘left’;
bb.style.styleFloat = ‘left’;
}
function float2(){
var aa = document.getElementById(‘yourdiv1′);
var bb = document.getElementById(‘yourdiv2′);
aa.style.cssFloat = ‘left’;
bb.style.cssFloat = ‘right’;
aa.style.styleFloat = ‘left’;
bb.style.styleFloat= ‘right’;
}

aaaaaa
bbbbbb
Black_Diamond says:

April 30, 2011 at 3:30 pm

sorry I had a problem with copying it..Here it is the whole script thank you

<script language='javascript' type='text/javascript'>
function float1(){
var aa = document.getElementById('yourdiv1');
var bb = document.getElementById('yourdiv2');
aa.style.cssFloat= 'right';
aa.style.styleFloat= 'right';
bb.style.cssFloat = 'left';
bb.style.styleFloat = 'left';
}
function float2(){
var aa = document.getElementById('yourdiv1');
var bb = document.getElementById('yourdiv2');
aa.style.cssFloat = 'left';
bb.style.cssFloat = 'right';
aa.style.styleFloat = 'left';
bb.style.styleFloat= 'right';
}
</script>

<input type="button" onclick="float1();" value="style 1">
<input type="button" onclick="float2();" value="style 2">
<br>
<div id="yourdiv1">aaaaaa</div>
<div id="yourdiv2">bbbbbb</div>
Altin says:

May 5, 2011 at 2:14 am

Thanks a million, this solved my problem
Jillian Marohnic says:

July 10, 2011 at 10:41 am

Thank you! So simple, yet so much frustration.