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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery(1.6.3) 中css方法对浮动的实现缺陷分析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2145字，纯文字阅读大概需要4分钟。

内容图文

<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了。
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的jQuery(1.6.3) 中css方法对浮动的实现缺陷分析全部内容，希望文章能够帮你解决jQuery(1.6.3) 中css方法对浮动的实现缺陷分析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端