浏览器宽高

作者: 好奇男孩 | 来源:发表于2018-05-16 02:09 被阅读0次

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 的值获得元素的真实尺寸。

相关文章