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

outerWidth()メソッドは、条件にマッチした最初の要素のouterWidth（padding、borderを含めた高さのピクセル数）を、例えば「300」のように単位抜きの数値だけで返します。引数には「marginの値も含めるかどうか」をtureまたはfalseで指定可能です。既定値はfalseなので、何も指定しない場合はmarginの値は含まれません。このメソッドはwindowsオブジェクト、documentオブジェクトに対しては使用できないため、width()メソッドを使用しましょう。

書式

$( 対象要素 ).outerWidth( マージンを含む );

var oWidth = $("p").outerWidth();
var oWidth = $("p").outerWidth(true);

サンプル

outerWidthを調べる

<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 outW = $('p').outerWidth();
        var outWT = $('p').outerWidth(true);
        $('div').append('p要素のouterWidthは'+outW+'pxです<br>');
        $('div').append('p要素のouterWidth(true)は'+outWT+'pxです');
      });
    </script>
    </body>  
</html>

カテゴリー:CSS操作JavaScriptjQuery