jQuery中width,innerWidth和outerWidth,height,innerHeight和outerHeight之间有什么区别

Question

jQuery中width,innerWidth和outerWidth,height,innerHeight和outerHeight之间有什么区别

zaj*_*jke 114 javascript css jquery dom styles

我写了一些例子来看看有什么区别,但它们显示了宽度和高度相同的结果.

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

在此示例中,您可以看到它们输出相同的结果.如果有人知道有什么区别请给我适当的答案.

谢谢.