JQuery获取元素的位置信息

1
2
3
<div id="fatherElement">
<div id="childElement"></div>
</div>
1.获取设置元素的高度和宽度
1
2
3
4
$('#fatherElement').width();  //获取元素的宽度
$('#fatherElement').height(); //获取元素的高度
$('#fatherElement').width(size); //设置元素的宽度,size为宽度值
$('#fatherElement').height(size); //设置元素的高度,size为高度值
2.获取元素相对于浏览器的偏移量
1
2
$("#fatherElement").offset().left;  //返回id为fatherElement相对于浏览器窗口最左边的距离
$("#fatherElement").offset().top;  //返回id为fatherElement相对于浏览器窗口最顶部的距离
3.获取元素相对父元素的偏移量
1
2
$("#childElement").position().left;
$("#childElement").position().top;
4.获取元素距离滚动条顶部的距离(可视区域)
1
2
$("#fatherElement").scrollTop();
$("#fatherElement").scrollLeft();
5.获取元素的高度值和宽度值,包括padding,不包括border
1
2
$("#fatherElement").innerWidth();
$("#fatherElement").innerHeight();
6.获取元素的高度值和宽度值,包括padding和border
1
2
3
4
$("#fatherElement").outerWidth();   //包括边框和内边距
$("#fatherElement").outerHeight(); //包括边框和内边距
$("#fatherElement").outerWidth(true); //包括边框、外边距和内边距(也就是元素实际占用的大小)
$("#fatherElement").outerHeight(true); //包括边框、外边距和内边距(也就是元素实际占用的大小)