JavaScript获取div的各种高度

时间：04-20来源：作者：点击数：67

1、获取div的文档总高度（必须DOM操作）：

var scrollHeight=document.getElementById("inner").scrollHeight;

// jq中没有scrollHeight -只有scrollTop():
// 所以用DOM操作获取元素并计算scrollHeight。

2、获取div的窗口显示高度：

var height=$("#inner").height()
//或
var height=document.getElementById("inner").offsetHeight

3、获取div的卷上去高度：

var scrollTop=$("#inner").scrollTop();
//或
var scrollTop=document.getElementById("inner").scrollTop;

4、三者关系：

scrollHeight >= height + scrollTop

5、获取div距离文档(body)顶部的高度$("#inner").offset().top

6、获取div距离父元素顶部的距离$("#inner").position().top

7、获取div距离窗口(window)顶部的距离("#inner").offset().top - ("body").scrollTop()

<!DOCTYPE html>
<html>
<head>
    <meta charset=" utf-8">
    <meta name="author" content="https://www.cdsy.xyz/"/>
    <title>城东书院</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            width: 200px;
            height: 200px;
            background-color: blue;
            top: 100px;
            left: 100px;
            padding: 50px;
            position: absolute;
            margin-top: 20px;
        }

        #inner {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        span {
            color: red;
        }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        /*
         1、获取div的文档总高度（必须DOM操作）： var scrollHeight=document.getElementById("inner").scrollHeight;
         2、获取div的窗口显示高度： var height=$("#inner").height()
         3、获取div的卷上去高度： var scrollTop=$("#inner").scrollTop()
         4、三者关系：scrollHeight >= height + scrollTop

         5、获取div距离文档(body)顶部的高度 $("#inner").offset().top
         6、获取div距离父元素顶部的距离 $("#inner").position().top
         7、获取div距离窗口(window)顶部的距离 $("#inner").offset().top - $("body").scrollTop()
         * */


        $(document).ready(function () {
            $("#bt").click(function () {
                console.log("--div滚动距离------------------------------------");
                console.log(document.getElementById("inner").scrollTop);
                console.log($("#inner").scrollTop());

                console.log("--div文档总高度-------------------------------------");
                // There is no scrollHeight in jQuery - it's scrollTop():
                // 所以用DOM操作获取元素并计算scrollHeight。
                console.log(document.getElementById("inner").scrollHeight);//div总高度
                console.log($("#inner").scrollHeight);//jq没此方法

                console.log("---div显示高度----------------------------------");
                console.log(document.getElementById("inner").offsetHeight);//div显示高度
                console.log($("#inner").offsetHeight);//jq没此方法

                console.log(document.getElementById("inner").height);//DOM无此操作
                console.log($("#inner").height());//div显示高度

                /*----------------------------------------------------------------------------------*/

                var scrollHeight = document.getElementById("inner").scrollHeight;
                $("#zero").text($("#inner").height() + "  窗口卷上去=" 
                			+ $("#inner").scrollTop() + "   文档高度" + scrollHeight);
                $("#first").text($("#inner").offset().top);//距离文档顶部的高度
                $("#second").text($("#inner").position().top);//距离父元素顶部的距离
                $("#third").text($("#inner").offset().top - $("body").scrollTop());//距离窗口顶部的距离
                $("#forth").text($("body").scrollTop());//body卷上去高度

                console.log("--div距离顶部距离-----------------------------------------")
                //top:此属性仅仅在对象的定位(position)属性被设置时可用。否则，此属性设置会被忽略。
                console.log("blue==="+$("#box").offset().top);//blue距离body顶部距离 = top + margin-top
                console.log("blue==="+document.getElementById("box").top);//DOM中无此方法

                console.log("blue==="+$("#box").offsetTop);//jq无此方法
                console.log("blue==="+document.getElementById("box").offsetTop); 
                //blue距离body顶部距离 = top + margin-top
            })
        })
    </script>
</head>

<body style="height:1000px;">
A
<div id="box">
    Blue
    <div id="inner" style="overflow: auto">
        <!--ccccccccccccccccccccccccccccccccc-->
        offset()方法的定义和用法:
        此方法返回或设置所匹配元素相对于document对象的偏移量。
        获取匹配元素在当前document的相对偏移。
        返回的对象包含两个整型属:top和left。
        此方法只对可见元素有效。
        <!--ccccccccccccccccccccccccccccccc-->
    </div>
</div>

<div style="margin-top:420px;">
    红色区域的窗口高度：<span id="zero"></span>
    <br>
    不存在水平滑动时，窗口window高度 + 窗口window滚上去高度 <= 文档body总高度
    <br>
    同理，不存在水平滑动时，div的window高度 <= div的window高度 + div的window滚上去高度 <= 文档div的总高度
    <br>
    存在水平滑动时，div的window高度 <= div的window高度 + div的window滚上去高度 。
    <br>
    竖直滑到底部时：div的window高度 + div的window滚上去高度= 文档div的总高度+水平滚动条的高度
    <br>
    <br>
    c距离文档body顶部距离(不变):<span id="first"></span>
    <br>
    c距离父元素b顶部的距离(不变):<span id="second"></span>
    <br>
    c距离窗口window顶部的距离:<span id="third"></span>
    <br>
    body卷上去:<span id="forth"></span>
</div>

<input type="button" id="bt" value="点击显示结果">
</body>
</html>