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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
js函数排序的实例代码
Jul 01 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 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
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
语义化 H1 标签
2008/01/14 Javascript
用js做一个小游戏平台 (一)
2009/12/29 Javascript
js 居中漂浮广告
2010/03/21 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
jquery操作select大全
2014/04/25 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
react-router中的属性详解
2017/06/01 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
浅析Python中signal包的使用
2015/11/13 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
Python高级property属性用法实例分析
2019/11/19 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
迟到检讨书500字
2014/02/05 职场文书
初一学生期末评语
2014/04/24 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
2014年仓库工作总结
2014/11/20 职场文书
汇报材料怎么写
2014/12/30 职场文书
交心谈心活动总结
2015/05/11 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Python进行区间取值案例讲解
2021/08/02 Python
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python