ECMAScript设置元素浮动的几种艺术

大家清楚获取元素的更动属性,各浏览器中动用的性能分歧。我们都掌握IE中采用styleFloat,标准浏览器选择cssFloat。

<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下也得以拿走,如下

<div>test</div>
<script>
    var div = document.getElementsByTagName('div')[0];

    // IE9
    alert(div.currentStyle['float']); // none
</script>

IE6/7/8则是undefined。webkit 也支持float属性,如下

<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