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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
jQuery实现滚动效果
Nov 17 jQuery
vue实现移动端悬浮窗效果
Dec 01 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
js实现搜索提示框效果
Sep 05 Javascript
详谈 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函数(简单整理)
2010/04/30 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
Python time库基本使用方法分析
2019/12/13 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
会计与审计专业大专生求职信
2013/10/03 职场文书
车间班组长岗位职责
2013/11/13 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
个人总结与自我评价
2014/09/18 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
市级三好生竞选稿
2015/11/21 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript