jquery关于height的一些方法解释

直接看代码，里面有解释：

<!-- jquery关于height的知识点 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #i1{
            border:1px solid;
            width:100px;
            height:100px;
            overflow:auto;
            position:relative;
            padding-top:2px;
            margin-top:3px;
        }
        #i2{
            height:1000px;
            min-width:500px;
        }
        #i3{
            background-color:red;
            width:30px;
            height:30px;
            position:absolute;
        }
        #i4{
            background-color:blue;
        }
        p{
            margin:0;
        }
    </style>
</head>
<body>
    <div id="i1">
        <div id="i4">
            <div id="i3"></div>
            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        </div>
    </div>
    <div id="i2"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //浏览器的大滑轮位置
        var a = $(window).scrollTop();
        console.log(a);
        //相对于浏览器窗口的偏移量
        console.log($('#i1').offset());
        //相对于所有父亲中第一个relative的偏移量
        console.log($('#i3').position());
        //左右滑轮的位置
        var a = $(window).scrollLeft();
        console.log(a);
        //某个部分的滑轮位置
        var b = $('#i1').scrollTop();
        console.log(b);
        //获取标签的纯高度
        $('#i1').height();    //100px
        //内边距+纯高度
        $('#i1').innerHeight();   //102px
        //内边距+纯高度+边框
        $('#i1').outerHeight();   //104px
        //内边距+外边距+纯高度+边框
        $('#i1').outerHeight(true);  //107px
    </script>
</body>
</html>

　　

posted @ 2018-07-12 15:58  与君同悦  阅读(148)  评论(0)    收藏  举报