jQueryでmarginとpaddingを含めた値の取得方法

jQueryでmarginとpaddingを含めた値の取得方法 javascript
この記事は約3分で読めます。
スポンサーリンク

全ての親要素の値を取得するなら「.height()」でいい。
でも、ちょくちょく「margin」や「padding」、「border」を含めた値が欲しくなる時があります。
いつも忘れてしまうので、これを期に覚えようじゃないかと思いまして書いてゆきます!

この条件で取得していきます!

【HTML&CSS】

  <div class="object">「.object」</div>
  
  .object {
    width: 200px;
    height: 100px;
    padding: 10px 10px 10px 10px;
    border: 2px solid #000;
    margin: 20px 20px 20px 20px;
  }

「.object」

幅と高さを取得

【jQuery】

// 横幅を取得
var width = $(".object").width();
// 高さを取得
var height = $(".object").height();
「.object」の横幅は、高さはです。

「padding」を含めた幅と高さを取得

【jQuery】

// 横幅を取得
var width = $(".object").innerWidth();
// 高さを取得
var height = $(".object").innerHeight();
「.object」の「padding」を含めた横幅は、高さはです。

「padding + border」を含めた幅と高さを取得

【jQuery】

// 「padding + border」を含めた横幅を取得
var width = $(".object").outerWidth();
// 「padding + border」を含めた高さを取得
var height = $(".object").outerHeight();
「.object」の「padding + border」を含めた横幅は、高さはです。

「padding + border + margin」を含めた幅と高さを取得

【jQuery】

// 「padding + border + margin」を含めた横幅を取得
var width = $(".object").outerWidth(true);
// 「padding + border + margin」を含めた高さを取得
var height = $(".object").outerHeight(true);
「.object」の「padding + border + margin」を含めた横幅は、高さはです。

まとめ

今回は、わかりずらいpadding、margin、borderを含めたサイズの取得でした。
padding + borderの取得した数字がちょっとおかしいけど…。
なぜでしょうか。「box-sizing」かなと思いましたが違うみたいで。
もしわかる方いましたら教えていただけると嬉しいです。

この他に「border」は抜きで「margin + padding」を含めたサイズや、
「margin」だけ含めたサイズの取得は、需要がなさそうなので割愛させていただきました。

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました