4

特定の状況でのみ表示される別の div 内にあるテキストを含む div があります。このための HTML は単純で、次のようになります。

<div id='parent'>
  <div id='child'>
    Some text inside child div
  </div>
</div>

スタイリングは次のようになります。

#parent{ display:none; height:0px; }

jQuery を使用して、div が親の外にある場合と同じように、子の高さを取得したいと思います。

次の JavaScript は 0 を返します。おそらく 15 前後が望ましいと思います。

var child_height = $('#child').height();
alert(child_height);
4

4 に答える 4

2

これらすべてを試してみてください。

console.log($('#child').outerHeight());

console.log($('#child').css('height'));

console.log($('#child').height());

あなたの編集によると：

var height = $('#parent').css({visibility: 'hidden', display : 'block'}).find('#child').height();

$('#parent').css({visibility: 'hidden', display: 'none'});

console.log(height);

デモ

于 2012-05-24T18:40:47.830 に答える
2

非表示の親を一時的に表示し、次の後に非表示にすることができます。

// .parents means it will search through all parents, not just first hidden
var hiddenParents = $("#child").parents(":hidden").show();
var childHeight = $("#child").height();
hiddenParents.hide();

alert(childHeight);

http://jsfiddle.net/zjpav/3/

于 2012-05-24T18:46:59.917 に答える
1 
var child_height = $('#child').outerHeight();
alert(child_height);​

デモ

ただし、FF 10 では元のコードは問題なく動作します。

コメントに従って更新します。

隠しフィールドの場合、ゼロが返されます。次のようなことができます。

jQuery('#parent').css('display','block');
var child_height = $('#child').outerHeight();
alert(child_height);

child_height = $('#child').height();
alert(child_height);
jQuery('#parent').css('display','none');

デモ

于 2012-05-24T18:39:55.470 に答える
1

「特定の状況下でのみ表示される別の div 内」と言ったことに気付きました。親 div にある場合display: none;(たとえば、多数の jQuery 関数のいずれかを使用して非表示にした場合、最終的にはこのようになります)、子の高さは 0 として返されます。

于 2012-05-24T18:45:02.500 に答える