07 jQuery的位置信息

编程之家收集整理的这篇文章主要介绍了07 jQuery的位置信息编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、宽度和高度

获取宽度

.width()

描述:为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法

设置宽度

.width( value )

描述:给每个匹配的元素设置CSS宽度。

 

高度

获取高度

.height()

描述:获取匹配元素集合中的第一个元素的当前计算高度值。

  • 这个方法不接受任何参数。

设置高度

 .height( value )

描述:设置每一个匹配元素的高度值。

 

2、innerHeight()和innerWidth()

获取内部宽

.innerWidth()

描述:为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding,但是不包括border。

ps:这个方法不适用于window 和 document对象,对于这些对象可以使用.width()代替。

 

设置内部宽

.innerWidth(value);

描述: 为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字,jQuery会自动加上像素单位(px)

 

 

获取内部高

.innerHeight()

描述:为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border。

ps:这个方法不适用于window 和 document对象,对于这些对象可以使用.height()代替。

 

设置内部宽

.innerHeight(value);

描述: 为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字,jQuery会自动加上像素单位(px)

 

3.outWidth和outHeight()

 

获取外部宽

 .outerWidth( [includeMargin ] )

描述:获取匹配元素集合中第一个元素的当前计算外部宽度(包括padding,border和可选的margin)

  • includeMargin (默认: false) 类型: Boolean 一个布尔值,表明是否在计算时包含元素的margin值。
  • 这个方法不适用于window 和 document对象,可以使用.width()代替

设置外部宽

 .outerWidth( value )

描述: 为匹配集合中的每个元素设置CSS外部宽度。

 

获取外部宽

 .outerHeight( [includeMargin ] )

描述:获取匹配元素集合中第一个元素的当前计算外部高度(包括padding,border和可选的margin)

  • includeMargin (默认: false) 类型: Boolean 一个布尔值,表明是否在计算时包含元素的margin值。
  • 这个方法不适用于window 和 document对象,可以使用.width()代替

设置外部高

 .outerHeight( value )

描述: 为匹配集合中的每个元素设置CSS外部高度。

 

 

3、偏移

获取

.offset()

返回值:Object 。.offset()返回一个包含top 和 left属性的对象 。

描述:在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。

注意:jQuery不支持获取隐藏元素的偏移坐标。同样的,也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden,那么我们依然可以取得它的坐标

 

设置

 .offset( coordinates )

描述: 设置匹配的元素集合中每一个元素的坐标, 坐标相对于文档。

  • coordinates 类型: Object 一个包含top 和 left属性的对象,用整数指明元素的新顶部和左边坐标。

例子:

$("p").offset({ top: 10, left: 30 });

 

 

4.元素坐标

 .position()

返回值:Object{top,left}

描述获取匹配元素中第一个元素的当前坐标,相对于offset parent的坐标。(offset parent指离该元素最近的而且被定位过的祖先元素 )

当把一个新元素放在同一个容器里面另一个元素附近时,用.position()更好用。

 

5.滚动距离

水平方向

获取

.scrollLeft()

描述:获取匹配的元素集合中第一个元素的当前水平滚动条的位置(页面卷走的宽度)

 

设置:

.scrollLeft( value )

描述:设置每个匹配元素的水平方向滚动条位置。

 

垂直方向

获取

.scrollTop()

描述:获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置(页面卷走的高度)

 

设置:

.scrollLeft( value )

描述:设置每个匹配元素的垂直方向滚动条位置。

总结

以上是编程之家为你收集整理的07 jQuery的位置信息全部内容,希望文章能够帮你解决07 jQuery的位置信息所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的jQuery相关文章

1.开关灯效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
html: <section> <nav id="nav"> <a class="on">tab1</a> &l
Allot Transfer $(document).ready(function() { $('input[type=radio][name=bedStatus]').change(
比如上面这个页面, 分为三层:divOne是第外层,divTwo中间层,hr_three是最里层; 他们都有各自的click事件,最里层a标签还有href属性。 运行页面,点击“点击我”,会依次弹出:
比如info是一个字符串变量,如果需要去该变量的值,需要使用下面的语句:语法:alert($("#"+id).val());例如:使用id设置隐藏控件 $(".img").mouseover(function(event){ var html=event.target.innerHTML; //alert(html); var aid=html.match(/<a id="(...
$("#selectId").combobox('setValue',value);//使用ID选择器,来对下拉框进行赋值;下拉框有两个属性:ID 和 VALUE,通过上面的代码 对ID 进行赋值,赋值ID之后,value就自动加载过来了$('#dateTime').combobox('getValue');//下拉框的取Value方法$('#dateTime').combobox(...
1.开启disabled,是input不可以编辑$("#input_id").attr("disabled","disabled");2.关闭disabled$("#input_id").removeAttr("disabled");普通js中是这样写的,document.getElementById("input_id").disabled = false;...
前台:<inputtype="text"name="">   <ulid="list">   </ul>jq部分:vardata=["HeadFirstHTML与CSS","JavaScript高级程序设计","JavaScriptDOM编程艺术","高性能网站建设进阶指南","高性能网
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注