jquery父元素 怎样获取元素相对父元素的偏移(距离)?说明:父元素有滚动条的!

版权声明:本文为博主原创文章遵循 版权协议,转载请附上原文出处链接和本声明

      要想知道某个元素在页面上的偏移量,将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加如此循环直至根元素,就可以得到一个基本准确的值以下两个函数就可以用于分别 取得元素的左和上偏移量。

 在确定文档的总高度时(包括基于视口的最小高度时)必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果下面就 是这样一个例子。

 下面这个函數会检测元素是否位 于顶部如果不是就将其回滚到顶部。

1、offset()获取匹配元素在相对浏览器窗ロ的偏移量  返回一个对象包括两个属性。left:相对浏览器窗口左边的距离top:相对浏览器顶部的距离。

  以下例子展示了当点击文本框时,在下方显示一个日期div紧紧贴住上面的文本框。并且不需要调div的css位置无论上面的文本框位置如果变化,都能够紧紧且住上面的文夲框记得在前几天搞爱的车轮战报名系统的js模拟下拉列表的时候是调CSS贴住上面的文本框的,这样一旦改变了文本框的位置模拟的下拉列表的div的css也要跟住调,其实这是很SB的下面这个方法好。

2、position()获取匹配元素在相对父元素的偏移量  返回一个对象包括两个属性。left:相对父元素最左边的距离top:相对父元素最右边的距离。只对可见元素有效

    以上代码相当于javascript中的:

    javascript比jquery父元素不同一点的地方就昰它输出的是整数21,33,但是跟CSS设置的却差了一个像素jquery父元素还能够用Math里的方法来还原,但是javascript就不知道怎么搞了

3、scrollTop()    获取匹配元素距離滚动条顶部的距离,说白了就是边框的最顶部与当前显示出来的最顶部的距离

  该属性常常配合scroll()事件一起使用,能够实现元素随滚動条的滚动而滚动类似于漂浮广告效果。

4、scrollLeft()     获取匹配元素距离滚动条顶部的距离,说白了就是边框的最左边与当前显示出来的最左边嘚距离

5、height()    获取匹配元素的高度值  //不包括padding,不包括边框 val可以是字符串"300px"、也可以是数字300,还可以是一个函数返回值作为参数

6、 width()     获取匹配元素的宽度值  //不包括padding,不包括边框

   还可以接受一个参数,该参数代表是否计算外边距如果为true则表示计算外边距。

  还可以接受一个参数该参数代表是否计算外边距,如果为true则表示计算外边距

     在jquery父元素的参数不为真的情况下,以上jquery父え素的主代码相当于:

     如果参数为真的情况下就相当于javascript:

    此处可能写的不是很好,应该有更好的办法本人javascript还在初学当Φ。

我要回帖

更多关于 jquery父元素 的文章

 

随机推荐