blog

トップ  コーディング  【jQuery】要素の高さ・横幅を取得する方法

【jQuery】要素の高さ・横幅を取得する方法

コーディング 2023.04.05

コンテンツ

jQueryで要素の高さ・横幅を取得する方法
jQueryで要素の高さ・横幅を取得するメソッドまとめ

jQueryで要素の高さ・横幅を取得する方法

codepen

See the Pen
Untitled by 田村翔 (@geqvzwon-the-typescripter)
on CodePen.

HTML

<div class="box"></div>

CSS

.box {
  width: 100px;
  height: 100px;
  padding: 25px;
  margin: 30px;
  border: 5px solid red;
  background-color: black;
}

jQuery

要素の高さ・横幅を取得するメソッドは4種類あります。
場面に応じて、適切なメソッドを利用できるようにしましょう。

$(function() {
  var box = $('.box');
  
  // 要素本体
  box.height(); // 100
  box.width(); // 100
  
  // 要素本体 + padding
  box.innerHeight(); // 150
  box.innerWidth(); // 150
  
  // 要素本体 + padding + border
  box.outerHeight(); // 160
  box.outerWidth(); // 160
  
  // 要素本体 + padding + border + margin
  box.outerHeight(true); // 220
  box.outerWidth(true); // 220
});