12.14JQ元素的尺寸

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