jQuery(1.6.3)におけるCSSメソッドのFloating実装不具合の解析_jquery

jQueryのcssメソッドは2つの記述方法を統合しており、以下のcssメソッドにパラメータ「float」を渡すことで要素のfloat属性を直接設定・取得することができます。

コードをコピー コードは次のとおりです: $('#d1').css('float', 'right'); $(' #d1').css('float'); alert(str);

ただし、jQuery はスマートでなければなりません。 cssFloat および styleFloat サポートされています。 API ドキュメント を参照してください。たとえば、要素の float 属性を取得する場合、以下は同等です。 1 $('div.left').css('float'); 2 $('div.left').css('cssFloat'); 3 $('div.left'); ').css('styleFloat'); ただし、メソッド 3 の戻り値はブラウザごとに異なります。たとえば、float を取得するには styleFloat を使用します

。コードをコピーします コードは次のとおりです: float div alert($('#d1').css('styleFloat'));

要素 div はありませんfloat なので、デフォルトで「none」を返すはずです。しかし、結果は次のようになります。 IE6/7/8: 空の文字列「none」を返します IE9/Firefox/Safari/Chrome/Opera: 空の文字列を返します 別の例は、cssFloat を使用して float を設定する例です:

コードをコピーします コードは次のとおりです。 float div $('#d1').css('cssFloat', 'right'); ;

IE6/7/8: 設定に失敗しました IE9/10/Firefox/Safari/Chrome/Opera: 設定に成功しました 別の例は、styleFloat を使用して float を設定する例です:

コードをコピーします コードは次のとおりです: float div&lt ;/div> $('#d1').css('styleFloat', 'right'); 🎜> IE6/ 7/8/9/10/Opera: 設定は成功しました (Opera は変わったもので、styleFloat と cssFloat の両方がサポートされています) Firefox/Safari/Chrome: 設定は失敗しました成功しました したがって、CSS メソッドを使用して float を取得または設定する場合は、ブラウザ間の違いを避けるために、素直に float を使用してください。 styleFloat や cssFloat は使用しないでください。 もちろん、これが jQuery のバグであれば、修正するのは簡単です。 1. jQuery.css メソッドを変更し、styleFloat 判定を追加します。

コードをコピー

コードは次のとおりです: // cssFloat には特別な処理が必要です if ( name === "cssFloat" || name === "styleFloat") { name = "float" } $(xx).css を使用します(「styleFloat」) 互換性の問題はありません。 2. jQuery.style メソッドを変更し、styleFloat または cssFloat が float に変換されるかどうかの判定を追加します

コードをコピーします

コード次のように: // テキスト ノードとコメント ノードにスタイルを設定しない if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 | | !elem.style ) { return; } // これは追加された修復コードです if( name === "cssFloat" || name === "styleFloat" ) { name = "float" } // 正しい名前を使用していることを確認してください var ret, type, origName = jQuery.camelCase( name ), style = elem .style,hooks = jQuery.cssHooks[ origName ];

$(xx).css("cssFloat", "right") または $(xx).css("styleFloat", "right") はすべてのブラウザで問題ありません。