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 相关文章推荐
深入理解javascript作用域和闭包
Sep 23 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 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
PHP4引用文件语句的对比
2006/10/09 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
css图片自适应大小
2007/11/28 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
浅析Python中yield关键词的作用与用法
2016/11/29 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
python pygame实现五子棋小游戏
2020/10/26 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
Python 使用office365邮箱的示例
2020/10/29 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
摄影实习自我鉴定
2013/09/20 职场文书
简历自我评价模版
2014/01/31 职场文书
环境卫生标语
2014/06/09 职场文书
先进典型发言材料
2014/12/30 职场文书
保险内勤岗位职责
2015/04/13 职场文书
感恩教师节主题班会
2015/08/12 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python