                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS/jQuery宽高的理解和应用

jquery宽高方法测试

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    html,body{
        margin: 10px;
        padding: 20px;
        border: 5px solid #F00;
    }
    .parentDiv{
        width: 800px;
        height: 500px;
        margin: 5px auto;
        padding: 30px;
        background-color: #F60;
        border: 5px dashed #00F;
    }
    .childrenDiv{
        width: 300px;
        height: 300px;
        margin: 50px auto;
        padding: 5px;
        background-color: #0F0;
        border: 5px solid #FFF;
    }
</style>
</head>
<body>
    <div class="parentDiv">
        <div class="childrenDiv"></div>
    </div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    console.log($(window).height());
    console.log($(document).height());
    
    console.log($(window).innerHeight());
    console.log($(document).innerHeight());
    
    console.log($(window).outerHeight());
    console.log($(document).outerHeight());
    
    console.log($(window).outerHeight(true));
    console.log($(document).outerHeight(true));
    
    console.log($(".childrenDiv").height());
    console.log($(".childrenDiv").innerHeight());
    console.log($(".childrenDiv").outerHeight());
    console.log($(".childrenDiv").outerHeight(true));
    
    $(".parentDiv").scroll(function () {
    console.log($(this).scrollTop());
    })
    
    console.log($(".childrenDiv").offset().top);
    console.log($(".childrenDiv").offset().left);
    console.log($(".childrenDiv").position().top);
    console.log($(".childrenDiv").position().top);
</script>
</body>
</html>

学之舟_36820

2016-11-04

源自：JS/jQuery宽高的理解和应用 4-3

关注问题我要回答

509

操作

收起

2 回答

学之舟_36820 提问者
2016-11-11

虽然高度在不同浏览器中表达有所不同，不过对于确定文档高度来说，只要求取得在浏览器中高的相关属性中的最大值就可以。

以下代码可看到每一个浏览器都可以取得值，值也是最大的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="height: 500">
<script type="text/javascript">
    document.write("document.body.scrollHeight: " + document.body.scrollHeight + "<br />" + "document.documentElement.scrollHeight: " + document.documentElement.scrollHeight + "<br />");

    var docHeight = Math.max(document.documentElement.scrollHeight || document.body.scrollHeight, document.documentElement.clientHeight || document.body.clientHeight);

    document.write("docHeight: " + docHeight);
</script>
</body>
</html>