jQuery 「CSS操作」要素の高さを調べる

.height()メソッドは、条件にマッチした最初の要素の高さ（paddingを含めないピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。「300px」のように単位を含めたい場合は、.height()ではなく.css(‘height’)を使用します。

書式

$( 対象要素 ).height();

var h= $("p").height();

サンプル

１、要素の高さを取得する

scriptタグ内でpHという変数を宣言して、p要素に設定したheightの値を代入します。p要素の高さを取得し、メッセージの表示に使用します。

<html>
      <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <style>
          .box{
            font-size: 12px;
            color: black;
            width: 500px;
            height: 500px;
            background-color: yellow;
            text-align: center;
          }
        </style>
  </head>
  <body>
    <p class="box"></p>
    <div></div>
    <script>
    $(document).ready(function(){
     var pH = $('p').height();
     $('div').append('p要素の高さは' + pH + 'pxです');
    });
    </script>
    </body>  
</html>

２、ドキュメント、ブラウザの高さを取得する。

.height()メソッドはドキュメントとブラウザの高さも取得可能です。$(document).height()と指定することで目に見えない部分のドキュメントの高さを取得でき、$(window).height()と指定することにより、そのとき表示されているブラウザ枠内の高さが取得できます。

<html>
      <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <style>
          .box{
            font-size: 12px;
            color: black;
            width: 500px;
            height: 500px;
            background-color: yellow;
            text-align: center;
          }
        </style>
  </head>
  <body>
    <p class="box"></p>
    <div></div>
    <script>
    $(document).ready(function(){
     var pH = $(document).height();
     var wH = $(window).height();
     $('div').append('documentの高さは' + pH + 'pxです<br>');
     $('div').append('windowの高さは' + wH + 'pxです');
    });
    </script>
    </body>  
</html>

カテゴリー:CSS操作JavaScriptjQuery