jQueryのwidth、innerWidth、outerWidth、height、innerHeight、outerHeightの違いは何ですか?質問する

jQueryのwidth、innerWidth、outerWidth、height、innerHeight、outerHeightの違いは何ですか?質問する

違いを確認するためにいくつか例を書きましたが、幅と高さについては同じ結果が表示されます。

<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>

この例では、同じ結果が出力されていることがわかります。違いが何であるかを知っている方がいらっしゃいましたら、適切な回答を示してください。

ありがとう。

ベストアンサー1

これらの例をご覧になりましたか? あなたの質問と似ているようです。

幅と高さの操作

ここに画像の説明を入力してください

jQuery - ディメンション

jQuery: 高さ、幅、内側、外側

おすすめ記事