一.JavaScript获取各种高度和宽度

1.和窗口大小有关

  document.body.clientWidth: 可视区域的宽

  document.body.clientHeight: 可视区域的高

  window.innerHeight/window.innerWidth: 声明了窗口的文档显示区的高度和宽度,以像素计。

  这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。IE 不支持这些属性。它用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。

  document.documentElement.clientWidth: 可见区域的宽

  document.documentElement.clientHeigth: 可见区域的高

注:document.body.clientHeight、window.innerHeight、document.documentElement.clientHeight三者的区别

  documet.body.clientWidth获取的是整个页面的高度,当页面没有出现滚动条是,doucment.body.clientHeight和document.documentElement.clientHeight相同

2.获取元素的大小

  .offsetWidth 自身宽度,包括左右边框

  .offsetHeight 自身高度,包括上下边框

  .clientWidth 可视宽度,不包括左右边框

  .clientHeight 可视高度,不包括上下边框

3.获取滚动距离

  .scrollWidth  元素的滚动宽度

  .scrollHeight 元素的滚动高度

4.元素被卷起的大小

  .scrollTop 竖直滚动条滚动的距离

  .scrollLeft 水平滚动条滚动的距离

5.获取浏览器窗口位置(和窗口的大小有关)

  window.screenLeft / window.screenX 网页正文部分上

  window.screenTop/ window.screenY 网页正文部分上

注: IE、chrome、safair、opera都支持window.screenLeft 和 window.screenTop, 但是firefox不支持

  Firefox、chrome、safair、opera都支持 window.screenX和window.screenY,但是IE不支持

6.获取屏幕分辨率

  window.screen.height 屏幕分辨率的高

  window.screen.width 屏幕分辨率的宽

7.获取屏幕可用的宽高

  window.screen.availHeight

  window.screen.availWidth

8.获取元素的上边框

  .clientTop

  .clientLeft

9.获取子元素到父元素边界的距离

  .offsetTop

  .offsetLeft

二.jquery获取宽高

  $(window).height()   // 获取浏览器显示区域(可视区域)的高度

  $(window).width()  // 获取浏览器显示区域(可视区域)的宽度

  $(document).height() // 获取页面的文档高度

  $(document).width() // 获取也面的文档宽度

  $(document.body).height() // 浏览器当前窗口文档body的高度

  $(docuemtn.body).width() // l浏览器当前窗口文档body的宽度

  $(document).scrollTop() // 获取滚动条到顶部的垂直高度(网也被卷起的高度)

  $(document).scrollLeft() // 获取滚动条到左边的距离

  $(obj).width() // 获取或设置元素的宽度

  $(obj).height() // 获取或设置元素的高度

  obj.offset().top  // 某个元素的上边界到body最顶部的距离(在元素不包含滚动条的情况下)

  obj.offset().left  // 某个元素的左边界到body最左边的距离(在元素不包含滚动条的情况下)

 注: 如果元素包含滚动条,则着两个值分别宝石当前元素的上/左边界到它的父级的上/左边界的偏移量