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

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

書式：

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

var w = $("p").width();

サンプル

１、要素の幅を取得する。script内のvarでpWidthという変数を宣言して、pに設定したwidthの値を代入し.html()メソッドでメッセージを表示させます。

<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: 200px;
        background-color: yellow;
        text-align: center;
      }
    </style>
</head>
<body>
<p class="box"></p>
<div></div>
<script>
$(document).ready(function(){
 var pWidth = $('p').width();
 $('div').html('p要素の幅は' + pWidth + 'pxです');
});
</script>
</body>  
</html>

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

<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: 5000px;
            height: 200px;
            background-color: yellow;
            text-align: center;
          }
        </style>
  </head>
  <body>
    <p class="box"></p>
    <div></div>
    <script>
    $(document).ready(function(){
     var dW = $(document).width();
     var wW = $(window).width();
     $('div').append('documentの高さは' + dW + 'pxです<br>');
     $('div').append('windowの高さは' + wW + 'pxです');
    });
    </script>
    </body>  
</html>

カテゴリー:CSS操作JavaScriptjQuery