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>

转载于:https://www.cnblogs.com/wangjie-01/p/4803918.html