jQueryのサイズ操作（width、height、innerWidth、innerHeight、outerWidth、outerHeight）とDOMのサイズ操作との違い

一. jQuery

width（）
は、現在の要素の幅を返します
height（）
は、現在の要素の高さを返します
innerWidth（）
は、現在の要素の幅（パディング値を含む）を返します
innerHeight（）
は、現在の要素の高さ（パディング値を含む）を返します
outsideWidth（）
は、現在の要素の幅を返します（パディング+境界値を含む）
outerHeight（）
は、現在の要素の高さを返します（パディング+ボーダー値を含む）

    <style>
        * {
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 20px;
            border: 10px dashed yellow;
        }
    </style>
    <script src="jQuery.min.js"></script>//引入jQuery
    <body>
    <div></div>
    <script>
        console.log('div的宽度是' + $('div').width());
        console.log('div的高度是' + $('div').height());
        console.log('div的宽度是(含padding值)' + $('div').innerWidth());
        console.log('div的高度是(含padding值)' + $('div').innerHeight());
        console.log('div的宽度是(含padding+border值)' + $('div').outerWidth());
        console.log('div的高度是(含padding+border值)' + $('div').outerHeight());
                /* 观察下列返回结果 */
        /* 
            div的宽度是200
            div的高度是200
            div的宽度是(含padding值)240(200+20*2)
            div的高度是(含padding值)240(200+20*2)
            div的宽度是(含padding+border值)260(200+20*2+10*2)
            div的高度是(含padding+border值)260(200+20*2+10*2)
        */
    </script>
</body>

2.DOM

幅
DOMの幅と高さの高さはjQueryのものと似ているため、ここでは説明しません。
innerWidth
innerHeightです
が、DOMのinnerWidthとinnerHeightはjQueryとは大きく異なり
ます。First：DOMのinnerWidthとinnerHeightは、ブラウザ関連のサイズ、つまりdivなどの単一要素ではなくウィンドウオブジェクトのサイズを返します。2
番目：windowオブジェクトウィンドウの読み取り専用属性は、ウィンドウのドキュメント表示領域の高さと幅を宣言します（注：ここでの幅と高さには、メニューバー、ツールバー、スクロールバーなどの高さは含まれていません）。）
例：私のコンピューターの画面サイズは1536 * 850です

        console.log(window.innerWidth);//1536
        console.log(window.innerHeight);//754
        /* 在这里为什么innerHeight不是850呢，因为innerHeight不包括菜单栏、工具栏以及滚动条等的高度，所以比850小 */

アウター幅
outerHeight
とouterWidthおよびouterHeightは、ブラウザウィンドウのサイズ（メニューバー、ツールバー、スクロールバーなどの高さを含む）を返します。

        console.log(window.outerWidth);//1536
        console.log(window.outerHeight);//850

jQueryのサイズ操作（width、height、innerWidth、innerHeight、outerWidth、outerHeight）とDOMのサイズ操作との違い

jQueryのサイズ操作（width、height、innerWidth、innerHeight、outerWidth、outerHeight）とDOMのサイズ操作との違い

おすすめ