jQuery 中css方法对浮动

JavaScript中设置元素的浮动属性(float),标准浏览器使用css教程Float,IE旧版本使用styleFloat。这样使用$(xx).css("cssFloat", "right") 或 $(xx).css("styleFloat", "right") 各浏览器就都ok了

jQuery的css方法统一了两种写法,直接使用float属性即可,如下css方法中传参数“float”即可以设置也可以获取元素的float。

<div id="d1">float div</div>
<script type="text/网页特效">
 $('#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>

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>

这样使用$(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 ];

时间: 2024-10-31 03:06:46

jQuery 中css方法对浮动的相关文章

jQuery使用CSS()方法给指定元素同时设置多个样式

 这篇文章主要介绍了jQuery使用CSS()方法给指定元素同时设置多个样式的方法,实例分析了jQuery中css方法的使用技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html> <html> <head> <

JQuery中clone方法复制节点

  本文实例讲述了JQuery中clone方法复制节点.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

JQuery中Text方法用法实例分析

  本文实例讲述了JQuery中Text方法用法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

jQuery中unwrap()方法用法实例

 这篇文章主要介绍了jQuery中unwrap()方法用法,实例分析了unwrap()方法的定义.功能及移除匹配元素父元素的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中unwrap()方法用法.分享给大家供大家参考.具体分析如下: 此方法将移除匹配元素的父元素. 从方法的字面意思可以看出是清除wrap()方法的效果. 语法: 代码如下: $(selector).unwrap() 实例代码:     代码如下: <!DOCTYPE html PUBLIC "-//W3

jQuery中wrapAll()方法用法实例

 这篇文章主要介绍了jQuery中wrapAll()方法用法,实例分析了wrapAll()方法的功能.定义及匹配元素的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中wrapAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法将所有匹配的元素用单个元素包裹起来. 此方法与wrap()方法虽然功能类似,但是有着很大区别.wrap()方法会把每一个匹配的元素都匹配一次. 语法一: 用指定的DOM元素去包裹匹配元素. 复制代码 代码如下: $(selector).wra

jQuery中wrapInner()方法用法实例

 这篇文章主要介绍了jQuery中wrapInner()方法用法,实例分析了wrapInner()方法的功能.定义及包裹匹配元素的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中wrapInner()方法用法.分享给大家供大家参考.具体分析如下: 此方法使用指定的HTML内容或元素将匹配的元素内容包裹起来. 语法一: 用指定的DOM元素去包裹匹配元素的内容. 代码如下: $(selector).wrapInner(elem) 参数列表: 参数 描述 elem 用于包裹目标的D

jQuery中replaceAll()方法用法实例

 这篇文章主要介绍了jQuery中replaceAll()方法用法,实例分析了replaceAll()方法的功能.定义及匹配元素去替换指定内容的方法,需要的朋友可以参考下     本文实例讲述了jQuery中replaceAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法用匹配元素去替换指定的内容. replaceAll()方法的作用和replaceWith()方法是完全一样的. 语法结构: 代码如下: $(content).replaceAll(selector)   参数列表:

jQuery中empty()方法用法实例

 这篇文章主要介绍了jQuery中empty()方法用法,以实例形式分析了empty()方法的功能.定义及将匹配元素中的所有内容移除的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中empty()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够将匹配元素中的所有内容移除,包括所有文本和子节点. 语法结构: 代码如下: $(selector).empty()   实例代码:   代码如下: <!DOCTYPE html> <html> <head&

jquery中load方法的用法及注意事项说明

 本篇文章主要是对jquery中load方法的用法及注意事项进行了详细介绍,需要的朋友可以过来参考下,希望对大家有所帮助 调用load方法的完整格式是:load( url, [data], [callback] ),其中  url:是指要导入文件的地址.  data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里.  callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另