web-dev-qa-db-ja.com

jQueryの幅、innerWidthとouterWidth、高さ、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>

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

ありがとう。

javascriptjquerycssdomstyles
110
zajke

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

幅と高さの操作

enter image description here

jQuery-ディメンション

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

254
zod

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

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

  • width =幅を取得、

  • innerWidth =幅+パディングを取得、

  • outerWidth =幅+パディング+ボーダー、およびオプションでマージンを取得

テストする場合は、.testクラスにパディング、マージン、境界線を追加して、再試行してください。

また、jQuery docs ...を参照してください。必要なものはほぼすべて揃っています。

4
Chris G-Jones

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

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

つの命令は同じ効果を与えません：最初の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と見なすことができます。「パラメータ」の背後にはさまざまな意味があるため、.css（ 'parameter'、value）の受け入れられたパラメータのリストを明確に紹介する必要があります関心を持っていますが、常に明確でなければなりません。この場合、「innerwidth」は「width」と同じ意味ではありません。次の文を使用して、この問題の追跡を.width（value）のドキュメントに見つけることができます。「最新のブラウザーでは、CSSのwidthプロパティにはパディングが含まれないことに注意してください」

1
user161546