要素に適用されているCSSのpaddingを取得

要素に適用されているCSSのpaddingを取得する方法をご紹介します。
ここでは、ハッシュでまとめて取得するようなjQueryの関数を定義する方法です。

JavaScriptの定義

$.fn.paddingWidth = function() { var widths = { top : 0, bottom : 0, left : 0, right : 0 }; if ($(this).length > 0) { $.each($(this), function() { widths = { top : Number($(this).css('padding-top').replace('px', '')), bottom : Number($(this).css('padding-bottom').replace('px', '')), left : Number($(this).css('padding-left').replace('px', '')), right : Number($(this).css('padding-right').replace('px', '')) }; }); } return widths; };

使い方

$(function() { var result = $sample.paddingWidth(), $sample = $('.sample'); console.log(result); });