JavaScript + Ajax 実践サンプル集

height()　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのheight()メソッドを利用してdiv要素の高さを取得して表示します。サンプルの長方形をクリックするとdiv要素の高さが表示されます。

height()

html要素の高さを取得するには、jQueryのheight()メソッドを使用します。ここでは、div要素の高さを取得して表示します。document、windowの高さを取得するには$(documnet).height()、$(window).height()のように記述します。

$("div").click(function() {
  $("p").text("The height for this div is " + $(this).height() + "px.");
});

<div style="height:20px">20px</div>
<div style="height:40px">40px</div>
<div style="height:60px">60px</div>
<br />
<p></p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery CSS height</title>
  <style type="text/css">
    .highlight1 {border: dotted 3px red;} 
    .highlight2 {background:yellow;}  
    div {  
      margin:5px; 
      width:60px; 
      height:60px;
      float:left; 
      text-align:center;
      cursor:pointer;
      background:green;
      color:black;
    }
    p {color:red;}
    br {clear:both;}         
  </style>
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(function(){        
    
    $("div").click(function() {
      $("p").text("The height for this div is " + $(this).height() + "px.");
    });
        
  });  
  </script>  
</head>
<body>