首页 > Web开发 > 详细

js/jq宽高的理解与运用

时间:2016-10-29 02:13:36      阅读:213      评论:0      收藏:0      [点我收藏+]

document:
1. 与client相关的宽高
document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

2. 与offset相关的宽高

3. 与scroll相关的宽高

网页滚动到顶部或底部:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    
<script>
function scrollBottomOrTop() {
    var clients = window.innerHeight || document.documentElement.clientHeight
    || document.body.clientHeight;
    var scrollTop = document.body.scrollTop;
    var wholeHeight = document.body.scrollHeight;
    if(clients+scrollTop>=wholeHeight){
        alert(我已经滚动到了底部);
    }
    if(scrollTop == 0) {
        alert(我已经滚动到顶部了);
    }
}
window.onscroll = scrollBottomOrTop;
</script>
    
</body>
</html>

 

js/jq宽高的理解与运用

原文:http://www.cnblogs.com/lqcdsns/p/6009797.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!