jQuery 中css方法對浮動

JavaScript中設定元素的浮動屬性（float），標準瀏覽器使用css教程Float，IE舊版本使用styleFloat。這樣使用$(xx).css("cssFloat", "right") 或 $(xx).css("styleFloat", "right") 各瀏覽器就都ok了

jQuery的css方法統一了兩種寫法，直接使用float屬性即可，如下css方法中傳參數“float”即可以設定也可以擷取元素的float。

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

但jQuery非要自作聰明，加上對cssFloat和styleFloat的支援，見API文檔，比如擷取元素的float屬性時，以下是等價的。

1 $('div.left').css('float');

2 $('div.left').css('cssFloat');

3 $('div.left').css('styleFloat');

但方式3在各個瀏覽器中傳回值不同，比如使用styleFloat擷取浮動

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

IE6/7/8：設定未成功

IE9/10/Firefox/Safari/Chrome/Opera：設定成功

又如使用styleFloat設定浮動：

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

這樣使用$(xx).css("styleFloat") 就沒有相容性問題了。

2，修改jQuery.style方法，加個判斷如果傳styleFloat或cssFloat都轉成float

// Don't set styles on text and comment nodes
if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
 return;
}

// 這是加的修複代碼

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 ];