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