快捷導(dǎo)航

jQuery(1.6.3) 中css方法對(duì)浮動(dòng)的實(shí)現(xiàn)缺陷分析

更新時(shí)間：2011年09月09日 10:26:44 作者：

JavaScript中設(shè)置元素的浮動(dòng)屬性（float），標(biāo)準(zhǔn)瀏覽器使用cssFloat，IE舊版本使用styleFloat。

jQuery的css方法統(tǒng)一了兩種寫法，直接使用float屬性即可，如下css方法中傳參數(shù)“float”即可以設(shè)置也可以獲取元素的float。

 
<div id="d1">float div</div> 
<script type="text/javascript"> 
$('#d1').css('float', 'right'); 
var str = $('#d1').css('float'); 
alert(str); 
</script> 

但jQuery非要自作聰明，加上對(duì)cssFloat和styleFloat的支持，見API文檔，比如獲取元素的float屬性時(shí)，以下是等價(jià)的。
1 $('div.left').css('float');
2 $('div.left').css('cssFloat');
3 $('div.left').css('styleFloat');
但方式3在各個(gè)瀏覽器中返回值不同，比如使用styleFloat獲取浮動(dòng)

復(fù)制代碼代碼如下:

 
<div id="d1">float div</div> 
<script type="text/javascript"> 
alert($('#d1').css('styleFloat')); 
</script> 

元素div沒有設(shè)置浮動(dòng)，因此默認(rèn)應(yīng)該返回“none”。但結(jié)果是
IE6/7/8 : 返回空字符串"none"
IE9/Firefox/Safari/Chrome/Opera : 返回空字符串
又如使用cssFloat設(shè)置浮動(dòng)：

復(fù)制代碼代碼如下:

 
<div id="d1">float div</div> 
<script type="text/javascript"> 
$('#d1').css('cssFloat', 'right'); 
</script> 

IE6/7/8：設(shè)置未成功
IE9/10/Firefox/Safari/Chrome/Opera：設(shè)置成功
又如使用styleFloat設(shè)置浮動(dòng)：

復(fù)制代碼代碼如下:

 
<div id="d1">float div</div> 
<script type="text/javascript"> 
$('#d1').css('styleFloat', 'right'); 
</script> 

IE6/7/8/9/10/Opera：設(shè)置成功（Opera是個(gè)怪胎，styleFloat和cssFloat都支持）
Firefox/Safari/Chrome：設(shè)置不成功
因此，使用css方法獲取或設(shè)置浮動(dòng)時(shí)為避免各瀏覽器差異還是老老實(shí)實(shí)的使用float。不要使用styleFloat或cssFloat。
當(dāng)然如果這算jQuery的bug，那么修復(fù)也是很容易的
1，修改jQuery.css方法，加個(gè)styleFloat的判斷。

復(fù)制代碼代碼如下:

 
// cssFloat needs a special treatment 
if ( name === "cssFloat" || name === "styleFloat") { 
name = "float"; 
} 

這樣使用$(xx).css("styleFloat") 就沒有兼容性問題了。
2，修改jQuery.style方法，加個(gè)判斷如果傳styleFloat或cssFloat都轉(zhuǎn)成float

復(fù)制代碼代碼如下:

 
// Don't set styles on text and comment nodes 
if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) { 
return; 
} 
// 這是加的修復(fù)代碼 
if( name === "cssFloat" || name === "styleFloat" ) { 
name = "float" 
} 
// Make sure that we're working with the right name 
var ret, type, origName = jQuery.camelCase( name ), 
style = elem.style, hooks = jQuery.cssHooks[ origName ]; 

這樣使用$(xx).css("cssFloat", "right") 或 $(xx).css("styleFloat", "right") 各瀏覽器就都o(jì)k了。