jQueryの幅、innerWidthとouterWidth、高さ、innerHeightとouterHeightの違いは何ですか

124

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

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

この例では、同じ結果が出力されることがわかります。誰かがその違いを知っている場合は、適切な答えを教えてください。

ありがとう。

— ザイケ
ソース

8

jQueryのドキュメントを見ましたか？

— Brad M

1

にパディング、ボーダー、マージンを追加してみて、<div>異なる結果が得られるかどうかを確認してください;）

— Niet the Dark Absol 2013

4

api.jquery.com/category/dimensions そのページにはそれらすべてが説明されており、それぞれをクリックするとさらに詳しい情報が表示されます。

— JClaspill 2013

私はグーグルで検索しましたが、どの回答も私の期待を満たしていません。

— zajke 2013

@BradM-だめ。しかし、「幅、innerWidth、outerWidth jqueryの違い」の結果は、本質的に何もわかりません。

— zajke 2013

282

これらの例を見ましたか？あなたの質問に似ています。

幅と高さを操作する

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

jQuery-ディメンション

jQuery：高さ、幅、内側と外側

— ゾッド
ソース

1

史上最高の回答

— ベンジャミン

私は以下の回答を投稿しました。現在、説明から推測できない2つのオプションの間に異なる動作が見られます

— GWorking

16

コメントで述べたように、ドキュメントには違いが正確に示されています。しかし要約すると：

innerWidth / innerHeight-パディングを含むがボーダーは含まない
outerWidth / outerHeight-パディング、ボーダー、およびオプションでマージンを含みます
高さ/幅-要素の高さ（パディングなし、マージンなし、ボーダーなし）

— デフォルト
ソース

4

width =幅を取得し、
innerWidth =幅+パディングを取得、
outerWidth =幅+パディング+ボーダー、オプションでマージンを取得

テストしたい場合は、パディング、マージン、ボーダーを.testクラスに追加して、もう一度試してください。

jQueryのドキュメントも読んでください...必要なものはほとんどあります

— クリスGジョーンズ
ソース

2

値の割り当てについて伝え、jqの「width」パラメーターの意味について比較する必要があるようです（new_valueがpx単位で定義されていると想定）。

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

3つの命令は同じ効果をもたらしません。 最初のjquery命令は、「幅」ではなく要素の内部幅を定義するためです。これはトリッキーです。

同じ効果を得るには、前にパディングを計算する必要があります（varがpadであると想定）。jqueryが純粋なjs（またはcssパラメータ 'width'）と同じ結果を取得するための正しい命令は次のとおりです。

jqElement.css('width',new_value+pads);

次の点にも注意してください。

var w1 = jqElement.css('width');
var w2 = jqelement.width();

w1は内幅ですが、w2は幅（css属性の意味）差です。これは、JQ APIドキュメントに記載されていません。

宜しくお願いします

トレブリー

注：私の意見では、これはバグJQ 1.12.4と考えることができます受け入れられましたが、興味がありますが、常に明確でなければなりません。この場合、「innerwidth」は「width」と同じことを意味しません。この問題のトラックを.width（value）のドキュメンテーションで見つけることができます。「最新のブラウザでは、CSSのwidthプロパティにはパディングが含まれていないことに注意してください」

— user161546
ソース

追加されたツイスト：.css('width')と同じです.outerWidth()（つまり、境界線とパディングが含まれます）box-sizing: border-box;。

— ボブスタイン

0

上記のすべての回答に同意します。ウィンドウまたはブラウザの見通しの観点から追加すると、innerWidth/ innerheightウィンドウのコンテンツ領域のみが含まれ、それ以外は何も含まれません

outerWidth/ outerHeight ウィンドウのコンテンツ領域が含まれ、これに加えて、ツールバー、スクロールバーなども含まれます。これらの値は常にinnerWidth / innerHeightの値以上になります。

それがもっと役立つことを願っています...

— アロク・ランジャン
ソース

0

私が今見ているのinnerWidthは、コンテンツ全体が含まれていることです

これは、ウィンドウが900pxあり、コンテンツが1200px（そしてスクロールがある）場合

innerWidth くれます 1200px
outerWidth くれます 900px

全く予想外の

*私の場合、コンテンツは <iframe>

— GWorking
ソース