JQ元素的尺寸
- width() height()
- innerWidth() innerHeight()
- outerWidth() outerHeight()
- 参数： 直接输入数字，作用：设置宽高
- 与原生JS的区别
在元素隐藏时js 不能获取，而jq可以获取；
获取尺寸：
<div id="div1" style="width: 100px; padding: 10px; border: 5px solid #111; margin: 20px;"></div>
<script>
//js原生的:
var div = document.getElementById('div1');
div.style.width;//100px;
div.clientWidth;//110 width+padding
div.offsetWidht;//130 width+padding+border
//jq:
$('#div1').width();//width 100 是数字
$('#div1').innerWidth();// width + padding = 120
$('#div1').outerWidth();//width + padding + border = 130
$('#div1').outerWidth(true);//width + padding + border + margin =
</script>
传参设置尺寸：实际都是改变的是width值 window document 无法通过传参设置
<div id="div1" style="width: 100px; padding: 10px; border: 5px solid #111; margin: 20px;"></div>
<script>
$('#div1').width(200);// width = 200
$('#div1').innerWidth(200);//width: 200 - padding
$('#div1').outerWidth(200);//width: 200 - padding - border
$('#div').outerWidth(200, true);//width: 200 - padding -border - margin
</script>
窗口的尺寸和文档的尺寸
$(window).width();//可视区的尺寸
$(document).width();//页面的尺寸
滚动距离
- scrollTop()
- scrollLeft()
document/window 和 元素 都有滚动条
$(document).click(function(){
alert( $(document).scrollTop() );
//元素：设置overflow-y:scroll;
//或设置 overflow-x:scroll;
})
元素距离
offset()
元素相对于整个页面的距离，不是window；
返回一个对象包含left和top属性
<script>
alert( $('#div2').offset().top );//250
</sc
position()
- 相对与最近的父级定位元素的距离:两个对象，top/left
注意: position() 是计算的margin的顶点到父级定位元素的距离, 其他跟位置相关的函数或属性都是以border的顶点为参考
<script>
alert( $('#div2').position().top );
</script>
offset.png
position.png
