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

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

JavaScriptの定義

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

使い方

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