jQueryのcssメソッドは2つの記述方法を統合しており、以下のcssメソッドにパラメータ「float」を渡すことで要素のfloat属性を直接設定・取得することができます。 コードをコピー コードは次のとおりです: <br>$('#d1').css('float', 'right'); $(' #d1').css('float'); <br>alert(str); <br><br> <br>ただし、jQuery はスマートでなければなりません。 cssFloat および styleFloat サポートされています。</div>API ドキュメント<br> を参照してください。たとえば、要素の float 属性を取得する場合、以下は同等です。 <a href="http://api.jquery.com/css/" target="_blank">1 $('div.left').css('float'); </a>2 $('div.left').css('cssFloat'); <br>3 $('div.left'); ').css('styleFloat'); <br>ただし、メソッド 3 の戻り値はブラウザごとに異なります。たとえば、float を取得するには styleFloat を使用します<br><br><br><div class="codetitle"> <span>。コードをコピーします<a style="CURSOR: pointer" data="53884" class="copybut" id="copybut53884" onclick="doCopy('code53884')"> <u></u> コードは次のとおりです: </a></span> </div><div id="d1">float div</div> <div class="codebody" id="code53884"><script type= "text/javascript"> <br>alert($('#d1').css('styleFloat')); <br><br> <br>要素 div はありませんfloat なので、デフォルトで「none」を返すはずです。しかし、結果は次のようになります。<br>IE6/7/8: 空の文字列「none」を返します</div>IE9/Firefox/Safari/Chrome/Opera: 空の文字列を返します<br>別の例は、cssFloat を使用して float を設定する例です: <br><br><br><br><div class="codetitle">コードをコピーします<span><a style="CURSOR: pointer" data="31857" class="copybut" id="copybut31857" onclick="doCopy('code31857')"><u> コードは次のとおりです。</u></a> </span><div id="d1"> float div</div> </div><script type="text/javascript"> <div class="codebody" id="code31857">$('#d1').css('cssFloat', 'right'); ; <br><br> <br>IE6/7/8: 設定に失敗しました<br>IE9/10/Firefox/Safari/Chrome/Opera: 設定に成功しました<br>別の例は、styleFloat を使用して float を設定する例です: </div> <br><br><br><br>コードをコピーします<div class="codetitle"> <span><a style="CURSOR: pointer" data="71378" class="copybut" id="copybut71378" onclick="doCopy('code71378')"> コードは次のとおりです:<u></u> </a><div id="d1">float div< ;/div> </span><script type="text/javascript"> </div>$('#d1').css('styleFloat', 'right'); 🎜><div class="codebody" id="code71378"> <br>IE6/ 7/8/9/10/Opera: 設定は成功しました (Opera は変わったもので、styleFloat と cssFloat の両方がサポートされています) <br>Firefox/Safari/Chrome: 設定は失敗しました成功しました<br> したがって、CSS メソッドを使用して float を取得または設定する場合は、ブラウザ間の違いを避けるために、素直に float を使用してください。 styleFloat や cssFloat は使用しないでください。 <br>もちろん、これが jQuery のバグであれば、修正するのは簡単です。<br>1. jQuery.css メソッドを変更し、styleFloat 判定を追加します。 </div> <br><br><br><br>コードをコピー<br><br><div class="codetitle"> コードは次のとおりです:<span><a style="CURSOR: pointer" data="52815" class="copybut" id="copybut52815" onclick="doCopy('code52815')"> <u>// cssFloat には特別な処理が必要です </u>if ( name === "cssFloat" || name === "styleFloat") { </a>name = "float" </span>} </div> <div class="codebody" id="code52815"> <br>$(xx).css を使用します(「styleFloat」) 互換性の問題はありません。 <br>2. jQuery.style メソッドを変更し、styleFloat または cssFloat が float に変換されるかどうかの判定を追加します <br><br><br> </div> <br> コードをコピーします <br><br><div class="codetitle"> コード次のように: <span><a style="CURSOR: pointer" data="35062" class="copybut" id="copybut35062" onclick="doCopy('code35062')"> <u>// テキスト ノードとコメント ノードにスタイルを設定しない </u>if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 | | !elem.style ) { </a>return; </span>} </div>// これは追加された修復コードです <div class="codebody" id="code35062">if( name === "cssFloat" || name === "styleFloat" ) { <br>name = "float" <br>} <br>// 正しい名前を使用していることを確認してください <br>var ret, type, origName = jQuery.camelCase( name ), <br>style = elem .style,hooks = jQuery.cssHooks[ origName ]; <br><br> <br>$(xx).css("cssFloat", "right") または $(xx).css("styleFloat", "right") はすべてのブラウザで問題ありません。</div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
