元素的尺寸
- width() height()
- innerWidth() innerHeight()
- outerWidth() outerHeight()
- 参数的作用(设置宽高)
- 与原生JS的区别
参数的作用(设置宽高)
<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>
实际都是改变的是width值
与原生JS的区别
<div id="div1" style="width: 100px;"></div>
<script>
var oDiv = document.getElementById('div1');
alert(oDiv.offsetWidth);//100
</script>
当我们隐藏div之后(display: none) 我们就不能获取到div的值了
JQ实战小技巧
- 可视区的尺寸(可以理解为窗口的尺寸)
- 页面的尺寸(可以理解为文档的尺寸)
$(window).width();//可视区的尺寸
$(document).width();//页面的尺寸
滚动距离
- scrollTop()
- scrollLeft()
一个公式 当滚动到底部的时候 滚动距离 + 可视区高度 = 页面的高度
$(document).scrollTop()+$(window).height() === $(document).height();//true
##元素距离
## offset()
元素相对于整个页面的距离
返回一个对象包含left和top属性
## position()
相对与最近的父级定位元素的距离
注意: position() 是计算的margin的顶点到父级定位元素的距离, 其他跟位置相关的函数或属性都是以border的顶点为参考点
