6

重複の可能性：
jquery .height（）がchromeで異なる結果を取得するのはなぜですか？

私は<div>CSSクラスを持っていmyclassます。CSSクラスは次のとおりです。

.myclass {
    position: absolute;
    width: 192px;
    font-size: 11px;
    background-color: #FFF;
    padding: 15px 15px 0;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);    
    display: block;
}

高さは指定しません。コンテンツはPHPによって動的にロードされます。jQuery$(document).ready(function() { });では、次の方法でdivの高さをデバッグします。

console.log($('div.myclass').height()); // the result = 330

HTML：

<div class="myclass">
<img src="image.png" />
<p>Text here text here</p>
</div>

ただし、Inspect ElementGoogle Chromeでこの機能を使用すると、 531pxと表示されます。なぜ違いがあるのですか？どうすれば531px値を取得できますか？

更新：$(this).outerHeight(); // 345px, as there is 15px margin

4

3 に答える 3

18

コードをウィンドウロードハンドラー内に配置してみてください。要素には15pxパディングプロパティがあるため、次のouterHeightメソッドを使用する必要があります。

$(window).load(function(){
    console.log($('div.myclass').outerHeight()); 
});

ブール値を受け入れることに注意outerHeightしてください。falseはマージンを除外することを意味し、trueはマージンを追加することを意味します。また、outerHeightはそのクラス名で最初に一致した要素の高さを返すことに注意してください。

于 2012-12-07T11:35:51.000 に答える
4 
console.log($('div.myclass').outerHeight());

outherHeightは、パディングとマージンも考慮に入れます。

編集：マージンが必要ない場合は、innerHeight()代わりに使用してください。

于 2012-12-07T11:33:18.047 に答える
3

実は正確です。

  • height（）関数は、パディングとマージンなしで、ブロック要素の高さを示します
  • innerHeight（）関数は、ブロック要素の高さを示します。パディングはありますが、マージンはありません。
  • externalHeight（）関数は、パディングとマージンを使用してブロック要素の高さを示します
于 2012-12-07T11:35:40.140 に答える