1. ホーム
  2. javascript

[解決済み] jQueryのwidth, innerWidth, outerWidthとheight, innerHeight, outerHeightの違いとは?

2022-05-14 01:02:40

質問

サンプルコードを書いてみたのですが、幅と高さが同じになってしまいました。

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

この例では、両者が同じ結果を出力していることがわかります。もし、何が違うのか知っている人がいれば、適切な答えを示してください。

ありがとうございます。

どのように解決するのですか?

あなたはこれらの例を参照してくださいましたか?あなたの質問に似ています。

幅と高さの操作

jQuery - ディメンション

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