javascript——BOM窗口的大小

可视区的宽、高：clientWidth 、clientHeight

滚动距离：scrollTop

内容的实际高度：scrollHeight

HTML代码：

<body style="height:2000px;">
    <div id="div1" style="width:100px; height:100px; border:1px solid red; padding:10px; margin:10px;">
        <div style="width:100px; height:600px; background:#ccc;"></div>
    </div>
</body>

JS代码：

    // 可视区的宽、高
    // alert(document.documentElement.clientWidth);
    // alert(document.documentElement.clientHeight);

    //滚动距离
    document.onclick = function(){
        // alert(document.documentElement.scrollTop);        //IE/火狐支持
        // alert(document.body.scrollTop);                    //仅Chrome支持

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        // alert(scrollTop);

        //scrollHeight : 内容实际宽高
        var oDiv = document.getElementById('div1');
        alert(oDiv.scrollHeight);

    };

 文档的高：document.body.offsetHeight

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
    
    //offsetHeight
    //alert( document.body.offsetHeight );
    
    //ie : 如果内容没有可视区高，那么文档高就是可视区
    // alert( document.documentElement.offsetHeight );
    
    alert( document.body.offsetHeight );
    
}
</script>
</head>

<body style="margin:0">
    sdfdsf
</body>
</html>

onscroll : 当滚动条滚动的时候触发

onresize : 当窗口大小发生变化的时候触发

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
//onscroll : 当滚动条滚动的时候触发
var i = 0;

window.onscroll = function() {
    document.title = i++;
}

//onresize : 当窗口大小发生变化的时候触发
window.onresize = function() {
    document.title = i++;
}
</script>
</head>

<body style="height:2000px;">
</body>
</html>

 

posted @ 2015-03-07 18:00  波克比520  阅读(346)  评论(0)  编辑  收藏  举报