- height:返回元素内容的高度。(根据是不是怪异盒子模型计算高度)
- offsetheight:它返回的高度是内容高+padding+边框。
- clientHeight:在页面上返回内容的可视高度(不包括边框,外边距或滚动条)。
- scrollHeight:返回整个元素的高度,即不设置高度时的,content高度+padding高度。其实就是展开后的clientHeight
这个content设置100px,但是显示83,因为还有滚动条,滚动条宽度17px。
offsetheight:130 = 内容高100+padding20+边框10。
clientHeight:103 = 内容的可视高度83(即100px-滚动条17px)+ padding20。
scrollHeight:167 =147(内容真实高度)+padding20 = 167。
搞懂scroll (参考链接)
scroll相关属性,其实它描述的是outer的属性:
#outer {
margin: 100px 50px;
height: 100px;
width: 50px;
padding: 10px 50px;
overflow: scroll;
}
<div id="outer">
<div id="inner"></div>
</div>
<button onclick="toBottom(outer)">返回顶部</button>
//慢慢滚动到底部的实现
function toBottom(ele) {
if (ele.scrollTop < ele.scrollHeight - ele.clientHeight) {
setTimeout(function(){
ele.scrollTop++;
toBottom(ele);
},100);
}
}
比如这段代码,inner中间是长list列表,outer是容器,overflow设置为auto或者scroll。
通常觉得滚动是inner长list在往上移动,但是这是错误的,是outer的scrollTop的值在变化。要考虑的是outer的属性。
//判定元素是否滚动到底:
element.scrollHeight - element.scrollTop === element.clientHeight
//返回顶部
element.scrollTop = 0
浏览器尺寸
- window.innerHeight:浏览器窗口的可见高度。包括了滚动条但是不包括border(该窗口的可见高度,如果下面打开开发者模式,这个高度缩小)
- window.outHeight:计算整个浏览器的高度,包括标签页等等的整个浏览器高度,只有改变整个浏览器的高度才会变。
这两个值是根据浏览器页面大小而变化的。
浏览器窗口的尺寸(就是内容部分,可以看见的部分,不包括工具栏和滚动条)
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的可见高度
window.innerWidth - 浏览器窗口的可见宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
兼容所有浏览器:
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;