要素に適用されている縦横幅を取得

要素に適用されている縦横幅を取得する方法をご紹介します。
ここでは、CSSのpaddingやborderを含めて取得するようなjQueryの関数を定義する方法です。

JavaScriptの定義

$.fn.getWidth = function(withBorder, withPadding) {
								var width = 0;

if ($(this).length > 0) {

$.each($(this), function() {
										width = $(this).width();

if (withBorder && withBorder === true) {
											var borderLeft  = Number($(this).css('border-left-width').replace('px', '')),
												borderRight = Number($(this).css('border-right-width').replace('px', ''));

width += borderLeft + borderRight;
										}

if (withPadding && withPadding === true) {
											var paddingLeft  = Number($(this).css('padding-left').replace('px', '')),
												paddingRight = Number($(this).css('padding-right').replace('px', ''));

width += paddingLeft + paddingRight;
										}
									});

}

return width;
							};

$.fn.getHeight = function(withBorder, withPadding) {
								var height = 0;

if ($(this).length > 0) {

$.each($(this), function() {
										height = $(this).height();

if (withBorder && withBorder === true) {
											var borderTop    = Number($(this).css('border-top-width').replace('px', '')),
												borderBottom = Number($(this).css('border-bottom-width').replace('px', ''));

height += borderTop + borderBottom;
										}

if (withPadding && withPadding === true) {
											var paddingTop    = Number($(this).css('padding-top').replace('px', '')),
												paddingBottom = Number($(this).css('padding-bottom').replace('px', ''));

height += paddingTop + paddingBottom;
										}
									});

}

return height;
							};

JavaScriptの定義

使い方