獲取div的可視區(qū)域的大小 clientWidth clientHeight
var odiv=document.getElementById('odiv');
alert(odiv.clientWidth);
獲取整個窗口的大小
alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);
滾動距離 scrollTop scrollLeft
document.onclick= function () {
//滾動條滾動的距離 document.documentElement.scrollTop[scrollLeft]
//谷歌認(rèn)為滾動條是屬于body里面的
// alert(document.documentElement.scrollTop);
// alert(document.body.scrollTop);
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
}
內(nèi)容高度 scrollWidth scrollHeight
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#con{
width: 100px;
height: 100px;
border: 1px solid black;
padding: 10px;
}
#son{
width: 100px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div id="con">
<div id="son"></div>
</div>
<script>
document.onclick= function () {
var con=document.getElementById('con');
alert(con.scrollWidth);
}
</script>
</body>
</html>
文檔高度 offsetHeight
<div style="height: 200px;margin: 20px;width: 100px;background: pink"></div>
alert(document.documentElement.offsetHeight);
alert(document.body.offsetHeight);
onscroll：當(dāng)滾動條滾動的時候觸發(fā)
onresize：當(dāng)窗口大小發(fā)生改變的時候觸發(fā)
<body style="height: 2000px">
<script>
var i=0;
//i是根據(jù)時間間隔來計算的
window.onscroll= function () {
document.title=i++;
};
</script>
</body>
