JQ各种尺寸笔记

1
2
3
4
5
6
7
8
9
$().width();                // width
$().innerWidth(); // width+padding
$().outerWidth(); // width+padding+border
$().outerWidth(true); // width+padding+border+margin

$().width(200); //设置宽度200
$().innerWidth(200); //设置width+padding=200
$().outerWidth(200); //设置width+padding+border=200
$().innerWidth(200, true); //设置width+padding+border+margin=200
可视区尺寸
1
2
$(window).height();          //可视区的高,宽同理
$(document).height(); //页面的高
滚动距离
1
2
$(document).scrollTop();    //相等于 $(document).height() - $(window).height();
$('#div1').scrollTop(); //某个元素的滚动距离
元素距离
1
2
3
4
offset() //offset()下面有两个属性,top和left 不加括号,offset()的距离值,都是相对于整个页面,不是相对于可视区,跟父级、祖先节点无关系,跟原生JS的offsetLeft有区别
position() //position() 是看父级有没有定位,有的话跟着父级走,没有的话再向上查找,直到window,注意:他不认margin

offsetParent() //获取有定位的祖先节点
例子
1
2
3
<div id="div1">
<div id="div2"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
*{
margin: 0;
padding: 0;
}

#div1{
width: 150px;
height: 100px;
background-color: red;
position: relative;
margin: 200px;
}

#div2{
width: 50px;
height: 50px;
background-color: yellow;
margin: 50px;
}

1
alert( $('#div2').offset().left - $('#div2').offsetParent().offset().left );

http://runjs.cn/detail/gpyjzuyn