JS元素宽高、可视区域宽高、滚动区域宽高和已滚动的高度
1.文档的高,屏幕的文档区域的高
document.body.clientHeight
2.有效的高,屏幕可视的高
document.documentElement.clientHeight
3.屏幕的总高度
document.documentElement.scrollHeight
4.滚动的高度
document.documentElement.scrollTop
js代码
<script>
// 获取有效的宽和高,屏幕可视的宽 高
var winX = document.documentElement.clientWidth;
var winY = document.documentElement.clientHeight;
alert(winX);
alert(winY);
// 获取body文本区域的宽和高
var winXX = document.body.clientWidth;
var winYY = document.body.clientHeight;
alert(winXX);
alert(winYY);
// 获取总的宽和高
var winXXX = document.documentElement.scrollWidth;
var winYYY= document.documentElement.scrollHeight;
alert(winXXX);
alert(winYYY);
//滚动的高度 此法存在兼容性问题
window.onscroll = function(){
//判断用户使用的浏览器是否为Chrome
if( navigator.userAgent.indexOf("Chrome") > -1){
//针对谷歌浏览器
var winY = document.body.scrollTop;
}else{
//针对IE、火狐浏览器
var winY = document.documentElement.scrollTop;
}
document.title = winY;
};
</script>
</html>