5

div に 100% の高さを指定しましたが、実際の高さを px で指定します。
そのdivの高さを知るにはどうすればよいですか?

4

4 に答える 4

6

コンテナがdivのIDである場合、jqueryを使用すると、これを使用できます。

$(document).ready(function() {
    alert($('#container').height());
});
于 2012-06-28T16:04:34.677 に答える
4

jQuery を使用すると、以下を使用できるはずです。

$('#div').height();

于 2012-06-28T16:05:53.073 に答える
2

前述のように、jQuery を使用すると、以下を使用できます。

$(document).ready(function(){
   $("#container").height();
});

heightjQueryによる計算方法ですが注意してください。ドキュメントから引用するには：

.height() は、CSS box-sizing プロパティの値に関係なく、常にコンテンツの高さを返すことに注意してください。

これが意味することは、適用した可能性のあるマージン、パディング、および境界線を無視することです。

興味のある正確な高さを取得するために利用できる、誰も言及していない代替手段は次のとおりです。

インナーハイト()

$(document).ready(function(){
   $("#container").innerHeight();
});

要素の高さだけでなくパディングも含める場合は、これを使用します。

アウターハイト()

$(document).ready(function(){
   $("#container").outerHeight(); //Include padding and borders
   $("#container").outerHeight(true); //Include padding, borders and margins
});

要素の高さだけでなく、パディング、ボーダー、マージンも含める場合に使用します (パラメーターとして true が渡された場合)。

デモを見る

デモは、300px の高さが div にどのように適用されるかを示しています。さらに、css は 20px の margin-top、50px の padding-top、および 5px の境界線を適用します。これらはすべて全体の高さに影響します。

height() のデモ出力

height()ただし、css を介して要素に追加された高さを無視して、jQuery がまだ 300 ピクセルしか返していないことに注意してください。

innerHeight() のデモ出力

jQueryinnerHeight()が 350 ピクセルを返す方法に注意してください。これは、div の 300 + パディングの 50 です。

outerHeight() のデモ出力

jQueryouterHeight()が 360 ピクセルを返すことに注意してください。これは、div の 300 + パディングの 50 + ボーダーの 10 (下 5 と上 5) です。

outerHeight(true) のデモ出力

jQuery がどのようouterHeight(true)に 380 ピクセルを返すかに注意してください。これは、div の 300 + パディングの 50 + ボーダーの 10 (下 5 と上 5) + マージンの 20 です。

于 2012-06-28T16:23:25.373 に答える
0

これはjqueryを使わない解決策です

document.querySelector("#yourElementIdGoesHere").getBoundingClientRect();

この関数は、次のプロパティを持つオブジェクトを返します

  • 下
  • 身長
  • 左
  • 右
  • 上
  • 幅

そこから幅と高さを取得するだけで、ピクセル単位です

—いいえ

于 2016-06-27T13:54:35.590 に答える