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


Posted in Javascript onSeptember 09, 2011

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了。
Javascript 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
Vue中props的详解
May 16 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
详谈 Jquery Ajax异步处理Json数据.
Sep 09 #Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 #Javascript
yepnope.js 异步加载资源文件
Sep 08 #Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 #Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 #Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 #Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 #Javascript
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php 猴子摘桃的算法
2017/06/20 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
js实现楼层导航功能
2017/02/23 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
小学生家长评语集锦
2014/01/30 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
大学专科自荐信
2014/06/17 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
vue实现简易音乐播放器
2022/08/14 Vue.js