管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jQuery(1.6.3) 中css方法对浮动的实现缺陷分析

　　jQuery的css方法统一了两种写法，直接使用float属性即可，如下css方法中传参数“float”即可以设置也可以获取元素的float。

　　

复制代码 代码如下:

　　<div id="d1">float div</div>

　　<script type="text/javascript">

　　$('#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>

　　元素div没有设置浮动，因此默认应该返回“none”。但结果是

　　IE6/7/8 : 返回空字符串"none"

　　IE9/Firefox/Safari/Chrome/Opera : 返回空字符串

　　又如使用cssFloat设置浮动：

　　

复制代码 代码如下:

　　<div id="d1">float div</div>

　　<script type="text/javascript">

　　$('#d1').css('cssFloat', 'right');

　　</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>

　　IE6/7/8/9/10/Opera：设置成功（Opera是个怪胎，styleFloat和cssFloat都支持）

　　Firefox/Safari/Chrome：设置不成功

　　因此，使用css方法获取或设置浮动时为避免各浏览器差异还是老老实实的使用float。不要使用styleFloat或cssFloat。

　　当然如果这算jQuery的bug，那么修复也是很容易的

　　1，修改jQuery.css方法，加个styleFloat的判断。

　　

复制代码 代码如下:

　　// cssFloat needs a special treatment

　　if ( name === "cssFloat" || name === "styleFloat") {

　　name = "float";

　　}

　　这样使用$(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 ];

　　这样使用$(xx).css("cssFloat", "right") 或 $(xx).css("styleFloat", "right") 各浏览器就都ok了。

教程首页 更多教程