设置元素浮动的几种方式
我们知道获取元素的浮动属性，各浏览器中使用的属性不同。大家都知道IE中使用styleFloat，标准浏览器使用cssFloat。
|
1
2
3
4
5
6
7
8
9
10
|
<div>test</div><script> var div = document.getElementsByTagName('div')[0]; // IE div.currentStyle.styleFloat; // none // FF/Chrome/Safari/Opera var sty = window.getComputedStyle(div, null); sty.cssFloat; // none</script> |
至于为什么不直接使用float大家应该很清楚，float是ECMAScript的保留字。
看jq源码中意外发现IE中使用“float”属性在IE9下也可以获取，如下
|
1
2
3
4
5
6
7
|
<div>test</div><script> var div = document.getElementsByTagName('div')[0]; // IE9 alert(div.currentStyle['float']); // none</script> |
IE6/7/8则是undefined。webkit 也支持float属性，如下
|
1
2
3
4
5
6
7
8
|
<div>test</div><script> var div = document.getElementsByTagName('div')[0]; // Chrome/Safari var sty = window.getComputedStyle(div, null); alert(sty['float']); // none</script> |
以下列举下各浏览器对float，cssFloat，styleFloat的支持情况
| IE6/7/8 | IE9 | Firefox | Safari | Chrome | Opera | |
| styleFloat | Y | Y | N | N | N | Y |
| cssFloat | N | Y | Y | Y | Y | Y |
| float | N | Y | N | Y | Y | N |