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>

JS元素宽高、可视区域宽高、滚动区域宽高和已滚动的高度

标签：

原文地址：http://www.cnblogs.com/wangjie-01/p/4803918.html