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

innerHeight()メソッドは、条件にマッチした最初の要素のinnerHeight（paddingを含めた高さのピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。このメソッドはwindowオブジェクト、documentオブジェクトに対しては使用できないため、代わりに.height()メソッドを使用します。

書式

$( 対象要素 ).innerHeight(値);

var pHeight = $("p").innerHeight();

サンプル

要素のinnerHeightを取得する。サンプルではp要素のheightを100px、paddingを5pxに指定したため、返された数値（innerHeight）は110pxになります。

<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>
          p{
            width: 150px;
            height: 100px;
            padding: 5px;
            background-color: yellow;
          }
        </style>
  </head>
  <body>
    <div></div>
    <p></p>
    <script>
      $(document).ready(function(){
        var innH = $('p').innerHeight();
        $('div').append('p要素のinnerHeightは'+innH+'pxです')
      });
    </script>
    </body>  
</html>

カテゴリー:CSS操作JavaScriptjQuery