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 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 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
初探jquery——表单应用范例
2007/02/20 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
详解如何构建Angular项目目录结构
2017/07/13 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
js实现时间日期校验
2020/05/26 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python利用beautifulSoup实现爬虫
2014/09/29 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python3 map函数和filter函数详解
2019/08/26 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
Keras设置以及获取权重的实现
2020/06/19 Python
Python tkinter实现日期选择器
2021/02/22 Python
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
创业计划书——互联网商机
2014/01/12 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
廉洁自律证明
2015/06/24 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers