Jquery-尺寸

1.窗口和文档的尺寸

$(window).height();
$(window).width();
$(document).height();
$(document).width();
//设置大小
$(window).width('300px');

2.元素的尺寸

//不包括padding
$("#ele").width();
$("#ele").height();
//包括padding ，不包括边框
$("#ele").innerHeight();
$("#ele").innerWidth();
//包括边框
$("#ele").outerHeight();
$("#ele").outerWidth();

注意：以上方法不能用于window和document对象，返回NaN

3.求元素的偏移量

offset
相对于document左上角的位置
position
相对于第一个具有定位性质的双亲元素
offsetParent
返回一个jquery对象，是具有定位性质的父亲节点

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #foo{
            background-color: red;
            position: absolute;
            top:10px;
            left:10px;
        }
    </style>
</head>
<body id="the_offset_parent"> 
<h1>Findding the Offset of an Element</h1>
<div id="foo">
    <div id="bar">
        Some Test inset #bar ,which id inside #foo
    </div>
    <div id="results"></div>
</div>

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var $foo=$('#foo');
        var $bar=$('#bar');
        var $results=$('#results');

        var fooPostion=$foo.position();
        var barPostion=$bar.position();

        var fooOffset=$foo.offset();
        var barOffset=$bar.offset();

        var $fooOffsetParent=$foo.offsetParent();
        var $barOffsetParent=$bar.offsetParent();

        $results.append('<p>#foo postion.top'+fooPostion.top+"</p>")
        .append('<p>#foo postion.left'+fooPostion.left+"</p>")
        .append('<p>#bar postion.top'+barPostion.top+"</p>")
        .append('<p>#bar postion.left'+barPostion.left+"</p>")

        .append('<p>#foo offset.top'+fooOffset.top+"</p>")
        .append('<p>#foo offset.left'+fooOffset.left+"</p>")
        .append('<p>#bar offset.top'+barOffset.top+"</p>")
        .append('<p>#bar offset.left'+barOffset.left+"</p>")

        .append('<p>#foo fooOffsetParent'+$fooOffsetParent.attr('id')+"</p>")
        .append('<p>#bar barOffsetParent'+$barOffsetParent.attr('id')+"</p>")

    });

</script>
</body> 

</html>

Paste_Image.png

4.滚动元素使其可见

！！！元素直接滚动到了顶部

    $('#bar').click(function(){
        var fooOffset=$('#foo').offset();
        var destination=fooOffset.top;
        $(document).scrollTop(destination);
    })

5.元素居中显示

elOffset.top+elHeight/2-viewportHeight/2

$(document).ready(function(){
        $('#bar').click(function(){
            var viewportWidth=$(window).width();
            var viewportHeight=$(window).height();
            var $foo=$("#foo");
            var elWidth=$foo.width();
            var elHeight=$foo.height();
            var elOffset=$foo.offset();
            $(window).scrollTop(elOffset.top+elHeight/2-viewportHeight/2);
            $(window).scrollLeft(elOffset.left+elWidth/2-viewportWidth/2);
        });
    });

6.判断元素是否可见,完全在视区中

<script type="text/javascript">
    $(document).ready(function(){
        var viewportWidth=$(window).width();
        var viewportHeight=$(window).height();
        var documentScrollTop=$(document).scrollTop();
        var documentScrollLeft=$(document).scrollLeft();

        var minTop=documentScrollTop,
            maxTop=documentScrollTop+viewportHeight,
            minLeft=documentScrollLeft,
            maxLeft=documentScrollLeft+viewportWidth;
        var $myElement=$('#myElement'),
            elementOffset=$myElement.offset();
        if(
            (elementOffset.top>minTop&&elementOffset.top+elementHeight<maxTop)&&
            (elementOffset.left>minLeft&&elementOffset.left+elementWidth<maxLeft)
        ){
            console.log('element is visible');
        } else {
            console.log('element is not visible');
        }
    });
</script>