window.innerHeight属性与outerHeight属性

通过window.innerHeight和window.outerHeight可以得到整个窗口的高度。其中：

• innerHeight是DOM视口的大小，包括滚动条。

• outerHeight是整个浏览器窗口的大小，包括窗口标题、工具栏、状态栏等。

  
  inner-outter-height.png

window.innerHeight
720
window.outerHeight
860

把Height改为Width同样有效，分别是innerWidth和outerWidth。

scrollX、scrollY

• scrollX：滚动条横向偏移
• scrollY：滚动条纵向偏移

scrollX
28
scrollY
7

这两个值随着滚动位置变化而变化

scrollTo、scrollBy、scroll

我们也可以通过方法scrollTo或者scroll方法改变滚动条位置到指定坐标

window.scrollTo(0, 300); // 滚动条纵向偏移移动到300px处

两个参数分别是水平、垂直方向偏移
scrollBy可以相对当前位置移动滚动条，而不是移动到绝对位置

scrollBy(0, 100); // 滚动条下移100px

页面宽高

element.clientHeight

1.jpg

element.offsetHeight

2.jpg

element.scrollHeight

元素滚动内容的总长度。如果元素没出现滚动条， scrollHeight等于 clientHeight

element.scrollTop

滚动的高度

window.innerHeight

窗口的高度

element.getBoundingClientRect() 获取元素在视窗中的位置

问题： 如果判断一个元素距离 document 顶部的偏移

function getOffsetTop( elem ){
  var offsetLeft = 0
  do {
     offsetTop += elem.offsetTop
  } while( elem = elem.offsetParent )
  return offsetTop
}

element.getBoundingClientRect().top  + document.body.scrollTop

范例：获取图片真实的宽高

onload加载所有的相关数据后，取宽高

// 图片地址
var img_url = ‘13643608813441.jpg'

// 创建对象
var img = new Image()

// 改变图片的src
img.src = img_url

// 加载完成执行
img.onload = function(){
    // 打印
    alert('width:'+img.width+',height:'+img.height)
}

如何获取元素的真实宽高

• 1.offsetHeight 可以用来计算元素的物理空间，此空间包括内容，padding 和 border（还包括滚动条的宽度，但大多时候滚动条的宽度是计算到 padding 和内容中的）

• 2.scrollHeight 用来计算可滚动容器的大小，包括不可见的部分，比如一个 300*300 的容器放入一个 600*600 的图片，此时 scrollHeight 为 600，当然，scrollHeight 的值需要加上 padding 的值。

• 3.clientHeight 表示可视区域，包括内容和 padding ，如果有滚动条，还需要减去滚动条的宽度。

• 4.getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值,getComputedStyle 可以提供给我们元素 border 和 padding 宽度在内的一系列值（仍然不要通过 element.style.border-width 获得），加上原先的 offsetHeight，就可以减去 border 和 padding 的值获得元素的真实尺寸。