12.14JQ元素的尺寸

JQ元素的尺寸

• width() height()
• innerWidth() innerHeight()
• outerWidth() outerHeight()
• 参数： 直接输入数字，作用：设置宽高
• 与原生JS的区别
  在元素隐藏时js 不能获取，而jq可以获取；
  获取尺寸：

传参设置尺寸：实际都是改变的是width值 window document 无法通过传参设置

窗口的尺寸和文档的尺寸

$(window).width();//可视区的尺寸
$(document).width();//页面的尺寸

滚动距离

• scrollTop()
• scrollLeft()
  document/window 和 元素 都有滚动条

$(document).click(function(){
    alert( $(document).scrollTop() );
//元素：设置overflow-y:scroll;  
//或设置  overflow-x:scroll;  
})

元素距离

offset()
元素相对于整个页面的距离，不是window；
返回一个对象包含left和top属性

offset.png

position.png