文档宽高及窗口事件
获取div的可视区域的大小 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]
//谷歌认为滚动条是属于body里面的
// alert(document.documentElement.scrollTop);
// alert(document.body.scrollTop);
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
}内容高度 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：当滚动条滚动的时候触发 onresize：当窗口大小发生改变的时候触发
<body style="height: 2000px">
<script>
var i=0;
//i是根据时间间隔来计算的
window.onscroll= function () {
document.title=i++;
};
</script>
</body>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.01.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读