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值的）

jq尺寸和位置总结篇（width scrollTop position offset）

标签：

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