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

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

書式

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

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

サンプル

要素のinnerWidthを取得する。サンプルはp要素のwidthを150px、paddingを5pxに指定したため、返された数値（innerWidth）は160pxになります。

<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 innW = $('p').innerWidth();
        $('div').append('p要素のinnerWidthは'+innW+'pxです')
      });
    </script>
    </body>  
</html>

カテゴリー:CSS操作JavaScriptjQuery