jq尺寸和位置总结篇(width scrollTop position offset)

一、先讲一下元素的尺寸吧,这个用的很多。

1  .width() .height() 获取元素的宽度,并且不含单位,相当于原生的offsetWidth,但是要注意2点

  原生的结果包含单位,并且是没办法获取到隐藏元素的宽高的。

2  .innerWidth() .innerHeight() // 相当于width+padding

3  .outerWidth() .outerHeight() // 相当于width + padding + border

4  .outerWidth(true) .outerHeight(true) // 相当于width + padding + border + margin 

以上几个用法用的蛮多的,以前也用过,但是要注意,这些方法不仅可以用来获取,也可以用来设置,比如,.outerWidth(200,true);

可视区的宽度, $(window).height();

页面的高度,    $(document).height();

页面的滚动距离 ,  $(document).scrollTop();这里即可获取,也可设置。

二、距离位置

$().offset().left   //元素到整个页面的距离,注意这里left 和 top 不用加括号(经常犯错!)

$().position().left  //元素到有定位的祖先节点的距离,如果没找到,则是到页面的距离,(注意这里是认margin值的)

 

原文地址:https://www.cnblogs.com/toodeep/p/4702800.html