可视区的宽、高：clientWidth 、clientHeight
滚动距离：scrollTop
内容的实际高度：scrollHeight
HTML代码：
<body style="height:2000px;"> <div id="div1" style="100px; height:100px; border:1px solid red; padding:10px; margin:10px;"> <div style="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>