您的位置：首页 > Web前端 > JQuery

jQuery(1.6.3) 中css方法对浮动的实现缺陷

2011-09-07 08:31 549 查看
jQuery(1.6.3) 中css方法对浮动的实现缺陷

JavaScript中设置元素的浮动属性（float），标准浏览器使用cssFloat，IE旧版本使用styleFloat。
jQuery的css方法统一了两种写法，直接使用float属性即可，如下css方法中传参数“float”即可以设置也可以获取元素的float。

1
<
div
id
=
"d1"
>float
div</
div
>
2
<
script
type
=
"text/javascript"
>
3
$('#d1').css('float',
'right');
4
var
str = $('#d1').css('float');
5
alert(str);
6
</
script
>
但jQuery非要自作聪明，加上对cssFloat和styleFloat的支持，见API文档，比如获取元素的float属性时，以下是等价的。
1 $('div.left').css('float');
2 $('div.left').css('cssFloat');
3 $('div.left').css('styleFloat');

但方式3在各个浏览器中返回值不同，比如使用styleFloat获取浮动

1
<
div
id
=
"d1"
>float
div</
div
>
2
<
script
type
=
"text/javascript"
>
3
alert($('#d1').css('styleFloat'));
4
</
script
>
元素div没有设置浮动，因此默认应该返回“none”。但结果是
IE6/7/8 : 返回空字符串"none"
IE9/Firefox/Safari/Chrome/Opera
: 返回空字符串
又如使用cssFloat设置浮动：

1
<
div
id
=
"d1"
>float
div</
div
>
2
<
script
type
=
"text/javascript"
>
3
$('#d1').css('cssFloat',
'right');
4
</
script
>
IE6/7/8：设置未成功
IE9/10/Firefox/Safari/Chrome/Opera：设置成功
又如使用styleFloat设置浮动：

1
<
div
id
=
"d1"
>float
div</
div
>
2
<
script
type
=
"text/javascript"
>
3
$('#d1').css('styleFloat',
'right');
4
</
script
>
IE6/7/8/9/10/Opera：设置成功（Opera是个怪胎，styleFloat和cssFloat都支持）
Firefox/Safari/Chrome：设置不成功
因此，使用css方法获取或设置浮动时为避免各浏览器差异还是老老实实的使用float。不要使用styleFloat或cssFloat。
当然如果这算jQuery的bug，那么修复也是很容易的
1，修改jQuery.css方法，加个styleFloat的判断。

1
//
cssFloat needs a special treatment
2
if
(
name ===
"cssFloat"
||
name ===
"styleFloat"
)
{
3
name
=
"float"
;
4
}
这样使用$(xx).css("styleFloat") 就没有兼容性问题了。
2，修改jQuery.style方法，加个判断如果传styleFloat或cssFloat都转成float

01
//
Don't set styles on text and comment nodes
02
if
(
!elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
03
return
;
04
}
05
//
这是加的修复代码
06
if
(
name ===
"cssFloat"
||
name ===
"styleFloat"
)
{
07
name
=
"float"
08
}
09
//
Make sure that we're working with the right name
10
var
ret,
type, origName = jQuery.camelCase( name ),
11
style
= elem.style, hooks = jQuery.cssHooks[ origName ];
这样使用$(xx).css("cssFloat", "right") 或 $(xx).css("styleFloat", "right") 各浏览器就都ok了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航