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 高亮显示文本中重要的关键字
Dec 24 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 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实现Unicode编码相互转换的方法示例
2020/11/17 PHP
JavaScript的Function详细
2006/11/14 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python自定义简单图轴简单实例
2018/01/08 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
内容编辑个人求职信
2013/12/10 职场文书
汉语言文学职业规划
2014/02/14 职场文书
小学毕业感言50字
2014/02/16 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
自我检讨报告
2015/01/28 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript